版面配置
object-fit
用於控制替換元素內容應如何調整大小的實用工具。
| 類別 | 樣式 |
|---|---|
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; |
範例
調整大小以覆蓋
使用 object-cover 實用工具調整元素內容的大小以覆蓋其容器
<img class="h-48 w-96 object-cover ..." src="/img/mountains.jpg" />包含在內
使用 object-contain 實用工具調整元素內容的大小，使其保持包含在其容器內
<img class="h-48 w-96 object-contain ..." src="/img/mountains.jpg" />延展以符合
使用 object-fill 實用工具延展元素內容以符合其容器
<img class="h-48 w-96 object-fill ..." src="/img/mountains.jpg" />縮小
使用 object-scale-down 實用工具以原始大小顯示元素內容，但如有必要則縮小以符合其容器
<img class="h-48 w-96 object-scale-down ..." src="/img/mountains.jpg" />使用原始大小
使用 object-none 實用工具以原始大小顯示元素內容，忽略容器大小
<img class="h-48 w-96 object-none ..." src="/img/mountains.jpg" />響應式設計
前綴將 object-fit 實用工具 與斷點變體（例如 md:）搭配使用，僅在中 等螢幕尺寸以上套用該實用工具
<img class="object-contain md:object-cover" src="/img/mountains.jpg" />深入瞭解如何在 變體文件中使用變體。
