object-fit
Các tiện ích để kiểm soát cách nội dung của một phần tử được thay thế nên được thay đổi kích thước.
| Class | Styles |
|---|---|
object-contain | object-fit: contain; |
object-cover | object-fit: cover; |
object-fill | object-fit: fill; |
object-none | object-fit: none; |
object-scale-down | object-fit: scale-down; |
Ví dụ
Thay đổi kích thước để bao phủ
Sử dụng tiện ích object-cover để thay đổi kích thước nội dung của một phần tử để bao phủ container của nó:
<img class="h-48 w-96 object-cover ..." src="/img/mountains.jpg" />Chứa bên trong
Sử dụng tiện ích object-contain để thay đổi kích thước nội dung của một phần tử để nằm gọn trong container của nó:
<img class="h-48 w-96 object-contain ..." src="/img/mountains.jpg" />Kéo giãn để vừa khít
Sử dụng tiện ích object-fill để kéo giãn nội dung của một phần tử để vừa khít với container của nó:
<img class="h-48 w-96 object-fill ..." src="/img/mountains.jpg" />Thu nhỏ
Sử dụng tiện ích object-scale-down để hiển thị nội dung của một phần tử ở kích thước ban đầu nhưng thu nhỏ nó để vừa với container nếu cần thiết:
<img class="h-48 w-96 object-scale-down ..." src="/img/mountains.jpg" />Sử dụng kích thước ban đầu
Sử dụng tiện ích object-none để hiển thị nội dung của một phần tử ở kích thước ban đầu bỏ qua kích thước container:
<img class="h-48 w-96 object-none ..." src="/img/mountains.jpg" />Responsive design
Prefix an object-fit utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:
<img class="object-contain md:object-cover" src="/img/mountains.jpg" />Learn more about using variants in the variants documentation.