{"id":4355,"date":"2026-04-02T15:34:52","date_gmt":"2026-04-02T08:34:52","guid":{"rendered":"https:\/\/wpdesign.vn\/object-fit-background-size-va-aspect-ratio\/"},"modified":"2026-05-04T14:45:37","modified_gmt":"2026-05-04T07:45:37","slug":"object-fit-background-size-va-aspect-ratio","status":"publish","type":"post","link":"https:\/\/wpdesign.vn\/vi\/object-fit-background-size-va-aspect-ratio\/","title":{"rendered":"Object-fit, Background-size V\u00e0 Aspect-ratio"},"content":{"rendered":"\n

Trong k\u1ef7 nguy\u00ean c\u1ee7a Responsive Design, vi\u1ec7c x\u1eed l\u00fd h\u00ecnh \u1ea3nh v\u00e0 video kh\u00f4ng ch\u1ec9 d\u1eebng l\u1ea1i \u1edf vi\u1ec7c thi\u1ebft l\u1eadp k\u00edch th\u01b0\u1edbc. Th\u00e1ch th\u1ee9c th\u1ef1c s\u1ef1 n\u1eb1m \u1edf c\u00e1ch n\u1ed9i dung (content) th\u00edch nghi v\u1edbi khung ch\u1ee9a (container) m\u00e0 kh\u00f4ng l\u00e0m bi\u1ebfn d\u1ea1ng t\u1ef7 l\u1ec7 ho\u1eb7c g\u00e2y ra hi\u1ec7n t\u01b0\u1ee3ng d\u1ecbch chuy\u1ec3n b\u1ed1 c\u1ee5c (Layout Shift). \u0110\u1ec3 gi\u1ea3i quy\u1ebft b\u00e0i to\u00e1n n\u00e0y, CSS cung c\u1ea5p ba c\u01a1 ch\u1ebf \u0111\u1ed9c l\u1eadp nh\u01b0ng b\u1ed5 tr\u1ee3 l\u1eabn nhau: Object-fit<\/strong>, Background-size<\/strong> v\u00e0 Aspect-ratio<\/strong>. <\/p>\n\n

Vi\u1ec7c hi\u1ec3u sai b\u1ea3n ch\u1ea5t c\u1ee7a c\u00e1c thu\u1ed9c t\u00ednh n\u00e0y th\u01b0\u1eddng d\u1eabn \u0111\u1ebfn c\u00e1c l\u1ed7i v\u1ec1 tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng (UX), \u1ea3nh h\u01b0\u1edfng ti\u00eau c\u1ef1c \u0111\u1ebfn ch\u1ec9 s\u1ed1 SEO v\u00e0 hi\u1ec7u su\u1ea5t hi\u1ec3n th\u1ecb c\u1ee7a website.<\/p>\n\n

1. Object-fit: Ki\u1ec3m so\u00e1t n\u1ed9i dung c\u1ee7a Replaced Elements<\/h4>\n\n

object-fit<\/code> l\u00e0 thu\u1ed9c t\u00ednh \u0111\u01b0\u1ee3c thi\u1ebft k\u1ebf d\u00e0nh ri\u00eang cho c\u00e1c Replaced Elements<\/strong> (Ph\u1ea7n t\u1eed thay th\u1ebf) nh\u01b0 <img><\/code>, <video><\/code>, <canvas><\/code>. B\u1ea3n ch\u1ea5t c\u1ee7a c\u00e1c ph\u1ea7n t\u1eed n\u00e0y l\u00e0 ch\u00fang c\u00f3 k\u00edch th\u01b0\u1edbc n\u1ed9i t\u1ea1i (intrinsic dimensions) ri\u00eang, \u0111\u1ed9c l\u1eadp v\u1edbi c\u00e1c quy t\u1eafc CSS th\u00f4ng th\u01b0\u1eddng. <\/p>\n\n

1.1. C\u01a1 ch\u1ebf v\u1eadn h\u00e0nh<\/h6>\n\n

Khi ch\u00fang ta \u0111\u1eb7t width<\/code> v\u00e0 height<\/code> cho m\u1ed9t th\u1ebb <img><\/code>, ch\u00fang ta \u0111ang thay \u0111\u1ed5i k\u00edch th\u01b0\u1edbc c\u1ee7a “h\u1ed9p ch\u1ee9a” (content box) c\u1ee7a n\u00f3. Tuy nhi\u00ean, h\u00ecnh \u1ea3nh th\u1ef1c t\u1ebf b\u00ean trong c\u00f3 th\u1ec3 b\u1ecb k\u00e9o gi\u00e3n ho\u1eb7c b\u00f3p m\u00e9o \u0111\u1ec3 kh\u1edbp v\u1edbi c\u00e1i h\u1ed9p \u0111\u00f3. object-fit<\/code> xu\u1ea5t hi\u1ec7n \u0111\u1ec3 \u0111i\u1ec1u ph\u1ed1i c\u00e1ch h\u00ecnh \u1ea3nh \u0111\u00f3 “n\u1eb1m” nh\u01b0 th\u1ebf n\u00e0o trong h\u1ed9p ch\u1ee9a.<\/p>\n\n

1.2. C\u00e1c gi\u00e1 tr\u1ecb c\u1ed1t l\u00f5i v\u00e0 b\u00e0i to\u00e1n h\u00ecnh h\u1ecdc<\/h6>\n\n
    \n
  • cover<\/code><\/strong>: H\u00ecnh \u1ea3nh s\u1ebd m\u1edf r\u1ed9ng \u0111\u1ec3 l\u1ea5p \u0111\u1ea7y to\u00e0n b\u1ed9 h\u1ed9p ch\u1ee9a trong khi v\u1eabn duy tr\u00ec t\u1ef7 l\u1ec7 g\u1ed1c. Ph\u1ea7n th\u1eeba s\u1ebd b\u1ecb c\u1eaft b\u1ecf (clipping). \u0110\u00e2y l\u00e0 l\u1ef1a ch\u1ecdn ph\u1ed5 bi\u1ebfn nh\u1ea5t cho c\u00e1c \u1ea3nh \u0111\u1ea1i di\u1ec7n (Avatar) ho\u1eb7c Thumbnail. <\/li>\n\n\n\n
  • contain<\/code><\/strong>: H\u00ecnh \u1ea3nh s\u1ebd thu nh\u1ecf ho\u1eb7c ph\u00f3ng to \u0111\u1ec3 hi\u1ec3n th\u1ecb to\u00e0n b\u1ed9 n\u1ed9i dung trong h\u1ed9p ch\u1ee9a. N\u1ebfu t\u1ef7 l\u1ec7 khung h\u00ecnh c\u1ee7a \u1ea3nh kh\u00e1c v\u1edbi h\u1ed9p ch\u1ee9a, s\u1ebd xu\u1ea5t hi\u1ec7n c\u00e1c kho\u1ea3ng tr\u1ed1ng (letterboxing). <\/li>\n\n\n\n
  • fill<\/code> (M\u1eb7c \u0111\u1ecbnh)<\/strong>: H\u00ecnh \u1ea3nh b\u1ecb k\u00e9o gi\u00e3n \u0111\u1ec3 kh\u00edt v\u1edbi h\u1ed9p ch\u1ee9a, b\u1ea5t ch\u1ea5p t\u1ef7 l\u1ec7 g\u1ed1c. \u0110i\u1ec1u n\u00e0y th\u01b0\u1eddng d\u1eabn \u0111\u1ebfn hi\u1ec7n t\u01b0\u1ee3ng \u1ea3nh b\u1ecb m\u00e9o (distorted). <\/li>\n\n\n\n
  • none<\/code><\/strong>: H\u00ecnh \u1ea3nh gi\u1eef nguy\u00ean k\u00edch th\u01b0\u1edbc n\u1ed9i t\u1ea1i, kh\u00f4ng quan t\u00e2m \u0111\u1ebfn k\u00edch th\u01b0\u1edbc c\u1ee7a h\u1ed9p ch\u1ee9a.<\/li>\n\n\n\n
  • scale-down<\/code><\/strong>: Tr\u00ecnh duy\u1ec7t s\u1ebd so s\u00e1nh gi\u1eefa none<\/code> v\u00e0 contain<\/code> \u0111\u1ec3 ch\u1ecdn ra ph\u01b0\u01a1ng \u00e1n hi\u1ec3n th\u1ecb h\u00ecnh \u1ea3nh v\u1edbi k\u00edch th\u01b0\u1edbc nh\u1ecf h\u01a1n.<\/li>\n<\/ul>\n\n
    1.3. \u01afu \u0111i\u1ec3m v\u1ec1 SEO v\u00e0 Accessibility<\/h6>\n\n

    Kh\u00e1c v\u1edbi \u1ea3nh n\u1ec1n, vi\u1ec7c s\u1eed d\u1ee5ng <img><\/code> k\u1ebft h\u1ee3p v\u1edbi object-fit<\/code> cho ph\u00e9p tr\u00ecnh duy\u1ec7t l\u1eadp ch\u1ec9 m\u1ee5c h\u00ecnh \u1ea3nh t\u1ed1t h\u01a1n (SEO) v\u00e0 h\u1ed7 tr\u1ee3 c\u00e1c thi\u1ebft b\u1ecb \u0111\u1ecdc m\u00e0n h\u00ecnh (Screen Readers) th\u00f4ng qua thu\u1ed9c t\u00ednh alt<\/code>.<\/p>\n\n

    2. Background-size: Ngh\u1ec7 thu\u1eadt x\u1eed l\u00fd \u1ea3nh trang tr\u00ed<\/h4>\n\n

    Trong khi object-fit<\/code> x\u1eed l\u00fd c\u00e1c ph\u1ea7n t\u1eed thu\u1ed9c v\u1ec1 n\u1ed9i dung (DOM Content), background-size<\/code> l\u1ea1i can thi\u1ec7p v\u00e0o t\u1ea7ng Paint (V\u1ebd) c\u1ee7a ph\u1ea7n t\u1eed. N\u00f3 \u0111i\u1ec1u khi\u1ec3n c\u00e1ch m\u1ed9t h\u00ecnh \u1ea3nh \u0111\u01b0\u1ee3c v\u1ebd l\u00ean b\u1ec1 m\u1eb7t c\u1ee7a m\u1ed9t box. <\/p>\n\n

    2.1. S\u1ef1 kh\u00e1c bi\u1ec7t v\u1ec1 h\u1ec7 quy chi\u1ebfu<\/h6>\n\n

    \u1ea2nh n\u1ec1n kh\u00f4ng ph\u1ea3i l\u00e0 m\u1ed9t ph\u1ea7n t\u1eed DOM ri\u00eang bi\u1ec7t; n\u00f3 l\u00e0 m\u1ed9t thu\u1ed9c t\u00ednh trang tr\u00ed c\u1ee7a box \u0111\u00f3. Do \u0111\u00f3, background-size<\/code> kh\u00f4ng \u1ea3nh h\u01b0\u1edfng \u0111\u1ebfn k\u00edch th\u01b0\u1edbc c\u1ee7a ch\u00ednh ph\u1ea7n t\u1eed ch\u1ee9a n\u00f3. <\/p>\n\n

    2.2. C\u00e1c k\u1ecbch b\u1ea3n \u1ee9ng d\u1ee5ng<\/h6>\n\n
      \n
    • Hero Sections:<\/strong> S\u1eed d\u1ee5ng background-size: cover<\/code> \u0111\u1ec3 t\u1ea1o ra c\u00e1c ti\u00eau \u0111\u1ec1 l\u1edbn v\u1edbi h\u00ecnh \u1ea3nh \u1ea5n t\u01b0\u1ee3ng ph\u1ee7 k\u00edn m\u00e0n h\u00ecnh.<\/li>\n\n\n\n
    • Pattern & Textures:<\/strong> S\u1eed d\u1ee5ng c\u00e1c gi\u00e1 tr\u1ecb c\u1ee5 th\u1ec3 b\u1eb1ng px<\/code> ho\u1eb7c %<\/code> k\u1ebft h\u1ee3p v\u1edbi background-repeat<\/code> \u0111\u1ec3 t\u1ea1o ra c\u00e1c h\u1ecda ti\u1ebft l\u1eb7p l\u1ea1i.<\/li>\n\n\n\n
    • S\u1eed d\u1ee5ng nhi\u1ec1u l\u1edbp (Multiple Backgrounds):<\/strong> CSS cho ph\u00e9p x\u1ebfp ch\u1ed3ng nhi\u1ec1u h\u00ecnh \u1ea3nh l\u00ean m\u1ed9t ph\u1ea7n t\u1eed duy nh\u1ea5t, m\u1ed7i l\u1edbp c\u00f3 m\u1ed9t gi\u00e1 tr\u1ecb background-size<\/code> ri\u00eang bi\u1ec7t \u2014 \u0111i\u1ec1u m\u00e0 object-fit<\/code> kh\u00f4ng th\u1ec3 l\u00e0m \u0111\u01b0\u1ee3c.<\/li>\n<\/ul>\n\n
      2.3. H\u1ea1n ch\u1ebf v\u1ec1 Semantic Web<\/h6>\n\n

      V\u00ec \u1ea3nh n\u1ec1n ch\u1ec9 l\u00e0 thu\u1ed9c t\u00ednh trang tr\u00ed, n\u00f3 ho\u00e0n to\u00e0n v\u00f4 h\u00ecnh \u0111\u1ed1i v\u1edbi c\u00e1c c\u00f4ng c\u1ee5 t\u00ecm ki\u1ebfm v\u00e0 kh\u00f4ng th\u1ec3 mang l\u1ea1i \u00fd ngh\u0129a ng\u1eef ngh\u0129a (semantics) cho t\u00e0i li\u1ec7u HTML.<\/p>\n\n

      3. Aspect-ratio: \u0110\u1ecbnh h\u00ecnh Layout \u1ed5n \u0111\u1ecbnh<\/h4>\n\n

      aspect-ratio<\/code> l\u00e0 m\u1ed9t thu\u1ed9c t\u00ednh hi\u1ec7n \u0111\u1ea1i, gi\u1ea3i quy\u1ebft b\u00e0i to\u00e1n v\u1ec1 t\u1ef7 l\u1ec7 khung h\u00ecnh \u1edf t\u1ea7ng Layout. Tr\u01b0\u1edbc khi c\u00f3 thu\u1ed9c t\u00ednh n\u00e0y, l\u1eadp tr\u00ecnh vi\u00ean th\u01b0\u1eddng ph\u1ea3i s\u1eed d\u1ee5ng k\u1ef9 thu\u1eadt “Padding-top hack” \u0111\u1ec3 duy tr\u00ec t\u1ef7 l\u1ec7 cho m\u1ed9t box. <\/p>\n\n

      3.1. C\u00f4ng th\u1ee9c v\u00e0 C\u00e1ch t\u00ednh to\u00e1n<\/h6>\n\n

      Thu\u1ed9c t\u00ednh n\u00e0y cho ph\u00e9p ch\u00fang ta khai b\u00e1o tr\u1ef1c ti\u1ebfp t\u1ef7 l\u1ec7 mong mu\u1ed1n:<\/p>\n\n

      $$aspect-ratio = \\frac{width}{height}$$<\/p>\n\n

      V\u00ed d\u1ee5: aspect-ratio: 16 \/ 9;<\/code> ho\u1eb7c aspect-ratio: 1 \/ 1;<\/code>.<\/p>\n\n

      3.2. Ch\u1ed1ng l\u1ea1i Cumulative Layout Shift (CLS)<\/h6>\n\n

      M\u1ed9t trong nh\u1eefng v\u1ea5n \u0111\u1ec1 l\u1edbn nh\u1ea5t c\u1ee7a Web Performance l\u00e0 hi\u1ec7n t\u01b0\u1ee3ng n\u1ed9i dung b\u1ecb nh\u1ea3y (jank) khi h\u00ecnh \u1ea3nh \u0111\u01b0\u1ee3c t\u1ea3i xong.<\/p>\n\n

        \n
      • Tr\u01b0\u1edbc \u0111\u00e2y:<\/strong> Tr\u00ecnh duy\u1ec7t kh\u00f4ng bi\u1ebft chi\u1ec1u cao c\u1ee7a \u1ea3nh cho \u0111\u1ebfn khi d\u1eef li\u1ec7u \u0111\u01b0\u1ee3c t\u1ea3i v\u1ec1.<\/li>\n\n\n\n
      • Hi\u1ec7n t\u1ea1i:<\/strong> B\u1eb1ng c\u00e1ch k\u1ebft h\u1ee3p width: 100%<\/code> v\u00e0 aspect-ratio<\/code>, tr\u00ecnh duy\u1ec7t c\u00f3 th\u1ec3 t\u00ednh to\u00e1n ch\u00ednh x\u00e1c kh\u00f4ng gian c\u1ea7n gi\u1eef ch\u1ed7 tr\u01b0\u1edbc khi h\u00ecnh \u1ea3nh xu\u1ea5t hi\u1ec7n, gi\u00fap ch\u1ec9 s\u1ed1 CLS \u0111\u1ea1t m\u1ee9c t\u1ed1i \u01b0u.<\/li>\n<\/ul>\n\n

        4. Ph\u00e2n t\u00edch so s\u00e1nh v\u00e0 Ma tr\u1eadn quy\u1ebft \u0111\u1ecbnh<\/h4>\n\n

        \u0110\u1ec3 l\u1ef1a ch\u1ecdn c\u00f4ng c\u1ee5 ph\u00f9 h\u1ee3p, ch\u00fang ta c\u1ea7n xem x\u00e9t d\u1ef1a tr\u00ean m\u1ee5c \u0111\u00edch s\u1eed d\u1ee5ng v\u00e0 ki\u1ebfn tr\u00fac c\u1ee7a ph\u1ea7n t\u1eed:<\/p>\n\n

        Ti\u00eau ch\u00ed<\/strong><\/td>Object-fit<\/strong><\/td>Background-size<\/strong><\/td>Aspect-ratio<\/strong><\/td><\/tr><\/thead>
        \u0110\u1ed1i t\u01b0\u1ee3ng \u00e1p d\u1ee5ng<\/strong><\/td>Th\u1ebb <img><\/code>, <video><\/code><\/td>B\u1ea5t k\u1ef3 ph\u1ea7n t\u1eed n\u00e0o c\u00f3 \u1ea3nh n\u1ec1n<\/td>M\u1ecdi ph\u1ea7n t\u1eed DOM<\/td><\/tr>
        T\u00e1c \u0111\u1ed9ng Layout<\/strong><\/td>Kh\u00f4ng \u0111\u1ed5i k\u00edch th\u01b0\u1edbc Box<\/td>Kh\u00f4ng \u0111\u1ed5i k\u00edch th\u01b0\u1edbc Box<\/td>Tr\u1ef1c ti\u1ebfp thay \u0111\u1ed5i k\u00edch th\u01b0\u1edbc Box<\/td><\/tr>
        Gi\u00e1 tr\u1ecb c\u1ed1t l\u00f5i<\/strong><\/td>Ki\u1ec3m so\u00e1t n\u1ed9i dung b\u00ean trong<\/td>Ki\u1ec3m so\u00e1t l\u1edbp v\u1ebd b\u1ec1 m\u1eb7t<\/td>Ki\u1ec3m so\u00e1t h\u00ecnh d\u00e1ng c\u1ee7a h\u1ed9p ch\u1ee9a<\/td><\/tr>
        SEO & Accessibility<\/strong><\/td>T\u1ed1t (c\u00f3 th\u1ebb Alt)<\/td>Th\u1ea5p (ch\u1ec9 l\u00e0 trang tr\u00ed)<\/td>Trung t\u00ednh (\u1ea3nh h\u01b0\u1edfng b\u1ed1 c\u1ee5c)<\/td><\/tr>
        \u01afu ti\u00ean s\u1eed d\u1ee5ng<\/strong><\/td>\u1ea2nh n\u1ed9i dung, Gallery, Avatar<\/td>Hero banner, Icon trang tr\u00ed<\/td>Card, Video Player, Iframe<\/td><\/tr><\/tbody><\/table><\/figure>\n\n

        5. S\u1ef1 ph\u1ed1i h\u1ee3p chi\u1ebfn l\u01b0\u1ee3c gi\u1eefa c\u00e1c thu\u1ed9c t\u00ednh<\/h4>\n\n

        Trong ph\u00e1t tri\u1ec3n giao di\u1ec7n cao c\u1ea5p, ch\u00fang ta th\u01b0\u1eddng kh\u00f4ng d\u00f9ng \u0111\u01a1n l\u1ebb m\u1ed9t thu\u1ed9c t\u00ednh m\u00e0 k\u1ebft h\u1ee3p ch\u00fang \u0111\u1ec3 t\u1ea1o ra tr\u1ea3i nghi\u1ec7m ho\u00e0n h\u1ea3o.<\/p>\n\n

        5.1. C\u00f4ng th\u1ee9c cho m\u1ed9t Component “Card” hi\u1ec7n \u0111\u1ea1i<\/h6>\n\n

        Khi thi\u1ebft k\u1ebf m\u1ed9t danh s\u00e1ch b\u00e0i vi\u1ebft, c\u00e1c h\u00ecnh \u1ea3nh thumbnail c\u1ea7n c\u00f3 c\u00f9ng k\u00edch th\u01b0\u1edbc b\u1ea5t ch\u1ea5p \u1ea3nh g\u1ed1c l\u00e0 ngang hay d\u1ecdc:<\/p>\n\n

        CSS<\/p>\n\n

        .card-image {\n  width: 100%;           \/* Chi\u1ebfm h\u1ebft chi\u1ec1u r\u1ed9ng cha *\/\n  aspect-ratio: 4 \/ 3;   \/* Gi\u1eef ch\u1ed7 cho layout, tr\u00e1nh CLS *\/\n  object-fit: cover;     \/* \u0110\u1ea3m b\u1ea3o \u1ea3nh l\u1ea5p \u0111\u1ea7y m\u00e0 kh\u00f4ng b\u1ecb m\u00e9o *\/\n}\n<\/code><\/pre>\n\n
        S\u1ef1 k\u1ebft h\u1ee3p n\u00e0y \u0111\u1ea3m b\u1ea3o:<\/p>\n\n
          \n
        1. Layout lu\u00f4n \u0111\u1ed3ng nh\u1ea5t (Aspect-ratio).<\/li>\n\n\n\n
        2. H\u00ecnh \u1ea3nh lu\u00f4n \u0111\u1eb9p, kh\u00f4ng b\u1ecb m\u00e9o (Object-fit).<\/li>\n\n\n\n
        3. Hi\u1ec7u su\u1ea5t t\u1ea3i trang t\u1ed1i \u01b0u (Tr\u00ecnh duy\u1ec7t gi\u1eef ch\u1ed7 tr\u01b0\u1edbc).<\/li>\n<\/ol>\n\n
          5.2. X\u1eed l\u00fd Video chu\u1ea9n x\u00e1c<\/h6>\n\n
          Video th\u01b0\u1eddng c\u00f3 t\u1ef7 l\u1ec7 16:9. \u0110\u1ec3 \u0111\u1ea3m b\u1ea3o video responsive m\u00e0 v\u1eabn gi\u1eef \u0111\u00fang t\u1ef7 l\u1ec7 tr\u00ean m\u1ecdi thi\u1ebft b\u1ecb: <\/p>\n\n
          CSS<\/p>\n\n
          .video-container {\n  width: 100%;\n  aspect-ratio: 16 \/ 9;\n}\n\nvideo {\n  width: 100%;\n  height: 100%;\n  object-fit: contain; \/* Ho\u1eb7c cover t\u00f9y m\u1ee5c \u0111\u00edch thi\u1ebft k\u1ebf *\/\n}\n<\/code><\/pre>\n\n
          6. C\u00e1c sai l\u1ea7m ph\u1ed5 bi\u1ebfn v\u00e0 C\u00e1ch kh\u1eafc ph\u1ee5c<\/h4>\n\n
          6.1. S\u1eed d\u1ee5ng Background-image cho h\u00ecnh \u1ea3nh quan tr\u1ecdng<\/h6>\n\n
          Nhi\u1ec1u developer ch\u1ecdn background-image<\/code> v\u00ec d\u1ec5 d\u00e0ng d\u00f9ng background-size: cover<\/code>. Tuy nhi\u00ean, \u0111i\u1ec1u n\u00e0y l\u00e0m m\u1ea5t \u0111i kh\u1ea3 n\u0103ng ti\u1ebfp c\u1eadn (Accessibility) v\u00e0 SEO. <\/p>\n\n
          Kh\u1eafc ph\u1ee5c:<\/strong> H\u00e3y chuy\u1ec3n sang d\u00f9ng th\u1ebb <img><\/code> v\u1edbi object-fit: cover<\/code>. K\u1ebft qu\u1ea3 th\u1ecb gi\u00e1c l\u00e0 t\u01b0\u01a1ng \u0111\u01b0\u01a1ng nh\u01b0ng gi\u00e1 tr\u1ecb k\u1ef9 thu\u1eadt cao h\u01a1n nhi\u1ec1u. <\/p>\n\n
          6.2. Qu\u00ean thi\u1ebft l\u1eadp k\u00edch th\u01b0\u1edbc cho Aspect-ratio<\/h6>\n\n
          aspect-ratio<\/code> ch\u1ec9 ho\u1ea1t \u0111\u1ed9ng hi\u1ec7u qu\u1ea3 khi \u00edt nh\u1ea5t m\u1ed9t chi\u1ec1u (th\u01b0\u1eddng l\u00e0 width<\/code>) \u0111\u01b0\u1ee3c x\u00e1c \u0111\u1ecbnh. N\u1ebfu c\u1ea3 hai chi\u1ec1u \u0111\u1ec1u l\u00e0 auto<\/code>, thu\u1ed9c t\u00ednh n\u00e0y c\u00f3 th\u1ec3 kh\u00f4ng mang l\u1ea1i k\u1ebft qu\u1ea3 nh\u01b0 mong mu\u1ed1n trong c\u00e1c h\u1ec7 th\u1ed1ng layout ph\u1ee9c t\u1ea1p nh\u01b0 Flexbox hay Grid. <\/p>\n\n
          6.3. Coi th\u01b0\u1eddng tr\u00ecnh duy\u1ec7t c\u0169<\/h6>\n\n
          M\u1eb7c d\u00f9 aspect-ratio<\/code> \u0111\u00e3 \u0111\u01b0\u1ee3c h\u1ed7 tr\u1ee3 r\u1ed9ng r\u00e3i, nh\u01b0ng trong m\u1ed9t s\u1ed1 m\u00f4i tr\u01b0\u1eddng doanh nghi\u1ec7p \u0111\u1eb7c th\u00f9 s\u1eed d\u1ee5ng tr\u00ecnh duy\u1ec7t c\u0169, vi\u1ec7c cung c\u1ea5p m\u1ed9t gi\u1ea3i ph\u00e1p fallback (nh\u01b0 thi\u1ebft l\u1eadp chi\u1ec1u cao c\u1ee5 th\u1ec3 ho\u1eb7c d\u00f9ng padding-top) v\u1eabn l\u00e0 m\u1ed9t b\u01b0\u1edbc ki\u1ec3m so\u00e1t ch\u1ea5t l\u01b0\u1ee3ng c\u1ea7n thi\u1ebft.<\/p>\n\n
          7. K\u1ebft lu\u1eadn<\/h6>\n\n
          Object-fit<\/strong>, Background-size<\/strong> v\u00e0 Aspect-ratio<\/strong> t\u1ea1o th\u00e0nh m\u1ed9t h\u1ec7 sinh th\u00e1i m\u1ea1nh m\u1ebd \u0111\u1ec3 qu\u1ea3n l\u00fd h\u00ecnh \u1ea3nh v\u00e0 b\u1ed1 c\u1ee5c trong CSS.<\/p>\n\n
            \n
          • Object-fit<\/strong> l\u00e0 gi\u1ea3i ph\u00e1p cho n\u1ed9i dung.<\/li>\n\n\n\n
          • Background-size<\/strong> l\u00e0 gi\u1ea3i ph\u00e1p cho trang tr\u00ed.<\/li>\n\n\n\n
          • Aspect-ratio<\/strong> l\u00e0 gi\u1ea3i ph\u00e1p cho c\u1ea5u tr\u00fac v\u00e0 hi\u1ec7u su\u1ea5t.<\/li>\n<\/ul>\n\n
            Vi\u1ec7c l\u00e0m ch\u1ee7 ba thu\u1ed9c t\u00ednh n\u00e0y kh\u00f4ng ch\u1ec9 gi\u00fap giao di\u1ec7n c\u1ee7a b\u1ea1n tr\u1edf n\u00ean chuy\u00ean nghi\u1ec7p, s\u1eafc n\u00e9t m\u00e0 c\u00f2n \u0111\u00f3ng g\u00f3p tr\u1ef1c ti\u1ebfp v\u00e0o t\u1ed1c \u0111\u1ed9 v\u00e0 t\u00ednh \u1ed5n \u0111\u1ecbnh c\u1ee7a s\u1ea3n ph\u1ea9m cu\u1ed1i c\u00f9ng. M\u1ed9t l\u1eadp tr\u00ecnh vi\u00ean gi\u1ecfi kh\u00f4ng ch\u1ec9 bi\u1ebft c\u00e1ch l\u00e0m cho giao di\u1ec7n “\u0111\u1eb9p”, m\u00e0 c\u00f2n bi\u1ebft c\u00e1ch l\u00e0m cho n\u00f3 “\u0111\u00fang” v\u1ec1 m\u1eb7t k\u1ef9 thu\u1eadt v\u00e0 ki\u1ebfn tr\u00fac. <\/p>\n","protected":false},"excerpt":{"rendered":"
            Trong k\u1ef7 nguy\u00ean c\u1ee7a Responsive Design, vi\u1ec7c x\u1eed l\u00fd h\u00ecnh \u1ea3nh v\u00e0 video kh\u00f4ng ch\u1ec9 d\u1eebng l\u1ea1i \u1edf vi\u1ec7c thi\u1ebft […]<\/p>\n","protected":false},"author":4,"featured_media":4354,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[25],"tags":[],"class_list":["post-4355","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-publishing"],"acf":[],"_links":{"self":[{"href":"https:\/\/wpdesign.vn\/vi\/wp-json\/wp\/v2\/posts\/4355","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpdesign.vn\/vi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpdesign.vn\/vi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpdesign.vn\/vi\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/wpdesign.vn\/vi\/wp-json\/wp\/v2\/comments?post=4355"}],"version-history":[{"count":1,"href":"https:\/\/wpdesign.vn\/vi\/wp-json\/wp\/v2\/posts\/4355\/revisions"}],"predecessor-version":[{"id":4356,"href":"https:\/\/wpdesign.vn\/vi\/wp-json\/wp\/v2\/posts\/4355\/revisions\/4356"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpdesign.vn\/vi\/wp-json\/wp\/v2\/media\/4354"}],"wp:attachment":[{"href":"https:\/\/wpdesign.vn\/vi\/wp-json\/wp\/v2\/media?parent=4355"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpdesign.vn\/vi\/wp-json\/wp\/v2\/categories?post=4355"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpdesign.vn\/vi\/wp-json\/wp\/v2\/tags?post=4355"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}