Tidadigi Logo

Tailwind CSS Object Fit

Class này chấp nhận nhiều giá trị trong Tailwind CSS. Tất cả thuộc tính được bao phủ dưới dạng class. Đây là một lựa chọn thay thế cho CSS object-fit property. Class này được sử dụng để chỉ định cách hình ảnh hoặc video nên được thay đổi kích thước để phù hợp với hộp nội dung của nó để kiểm soát việc thay đổi kích thước nội dung của một phần tử được thay thế.

Object fit Classes

  • object-contain 
  • object-cover 
  • object-fill 
  • object-none 
  • object-scale-down

object-contain Class

Class này dùng để thay thế hình ảnh và giữ tỷ lệ khung hình gốc. Nó phù hợp với hộp nội dung. Điều chỉnh kích thước nội dung để nằm gọn bên trong container.

Cú pháp:

<element class="object-contain">...</element>

Ví dụ 1: Ví dụ này minh họa cách sử dụng class .object-contain.

HTML 
<!DOCTYPE html>
<html>

<head>
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
        rel="stylesheet">
</head>

<body class="text-center">
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1>

    <p><b>Tailwind CSS object Class</b></p>

    <div class="bg-green-300 w-full h-full">
        <img class="object-contain h-48 w-full" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190807114330/GFG115.png">
    </div>
</body>

</html>

Đầu ra:

tailwind-css-object-fit

object-cover Class

Class này giữ tỷ lệ khung hình gốc của hình ảnh được thay thế. Nó vừa với hộp nội dung. Đôi khi nó bị cắt để phù hợp khi tỷ lệ khung hình không khớp. Dùng class này để điều chỉnh kích thước nội dung để che phủ container.

Cú pháp:

<element class="object-cover">...</element>

Ví dụ 2: Ví dụ này minh họa cách sử dụng class .object-cover.

HTML 
<!DOCTYPE html>
<html>

<head>
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
        rel="stylesheet">
</head>

<body class="text-center">
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1>
    <b>Tailwind CSS object Class</b>
    <div class="bg-green-300 w-full h-full">
        <img class="object-cover h-48 w-full" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190807114330/GFG115.png">
    </div>
</body>

</html>

Đầu ra:

tailwind-css-object-fit

object-fill Class

Hình ảnh được thay thế trong class này sẽ được kéo dãn để vừa với hộp nội dung. Hình ảnh thay thế sẽ lấp đầy hộp bất kể tỷ lệ khung hình. Sử dụng class này để kéo dãn nội dung cho vừa container.

Cú pháp:

<element class="object-fill">...</element>

Ví dụ 3: Ví dụ này minh họa cách sử dụng class .object-fill.

HTML 
<!DOCTYPE html>
<html>

<head>
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
        rel="stylesheet">
</head>

<body class="text-center">
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1>

    <p><b>Tailwind CSS object Class</b></p>

    <div class="bg-green-300 w-full h-full">
        <img class="object-fill h-48 w-full" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190807114330/GFG115.png">
    </div>
</body>

</html>

Đầu ra:

tailwind-css-object-fit

object-none Class

Trong class này hình ảnh được thay thế sẽ bỏ qua tỷ lệ khung hình gốc. Do đó nó không được thay đổi kích thước. Class hiển thị nội dung ở kích thước gốc. Nó bỏ qua kích thước của container.

Cú pháp:

<element class="object-none">...</element>

Ví dụ 4: Ví dụ này minh họa cách sử dụng class .object-none.

HTML 
<!DOCTYPE html>
<html>

<head>
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
        rel="stylesheet">
</head>

<body class="text-center">
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1>

    <p><b>Tailwind CSS object Class</b></p>

    <div class="bg-green-300 w-full h-full">
        <img class="object-none h-48 w-full" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190807114330/GFG115.png">
    </div>
</body>

</html>

Đầu ra:

tailwind-css-object-fit

object-scale-down

Class này thay đổi kích thước hình ảnh như thể không có thuộc tính nào được chỉ định. Kết quả là kích thước đối tượng nhỏ nhất. Class hiển thị nội dung ở kích thước gốc. Nó thu nhỏ để phù hợp với container.

Cú pháp:

<element class="object-scale-down">...</element>

Ví dụ 5: Ví dụ này minh họa cách sử dụng class .object-scale-down.

HTML 
<!DOCTYPE html>
<html>

<head>
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
        rel="stylesheet">
</head>

<body class="text-center">
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1>
    <b>Tailwind CSS object Class</b>
    <div class="bg-green-300 w-full h-full">
        <img class="object-scale-down h-48 w-full" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190807114330/GFG115.png">
    </div>
</body>

</html>

Đầu ra:

tailwind-css-object-fit
Last Updated : 20/07/2025