- Layout
- object-fit
Layout
object-fit
用於控制替換元素內容應如何調整大小的通用類別。
| 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; |
範例（Examples）
調整大小以覆蓋（Resizing to cover）
使用 object-cover 通用類別來調整元素內容的大小以覆蓋其容器：
<img class="h-48 w-96 object-cover ..." src="/img/mountains.jpg" />包含在內（Containing within）
使用 object-contain 通用類別來調整元素內容的大小以保持在其容器內：
<img class="h-48 w-96 object-contain ..." src="/img/mountains.jpg" />拉伸填滿（Stretching to fit）
使用 object-fill 通用類別來拉伸元素內容以填滿其容器：
<img class="h-48 w-96 object-fill ..." src="/img/mountains.jpg" />縮小（Scaling down）
使用 object-scale-down 通用類別以原始大小顯示元素內容，但必要時會縮小以適應其容器：
<img class="h-48 w-96 object-scale-down ..." src="/img/mountains.jpg" />使用原始大小（Using the original size）
使用 object-none 通用類別以原始大小顯示元素內容，忽略容器大小：
<img class="h-48 w-96 object-none ..." src="/img/mountains.jpg" />響應式設計（Responsive design）
在 object-fit 通用類別前面加上像 md: 這樣的中斷點變體，讓該通用類別只在中型螢幕尺寸及以上時套用：
<img class="object-contain md:object-cover" src="/img/mountains.jpg" />在變體文件中了解更多關於使用變體的資訊。