卡卡網

object-fit(對象擬合)

object-fit有5個屬性：none、cover、contain、fill、scale-down，它們是用于控制如何調整被替換元素的內容大小的實用程序。

object-fit:none 使用元素的原始大小

以原始大小顯示元素的內容，忽略容器大小，使用object-fit:none。

<div>
  <img style="width:300px;height:250px;object-fit:none">
</div>

object-fit:cover 調整大小以覆蓋容器

使用 object-fit:cover 調整元素內容的大小以覆蓋其容器。

<div>
  <img style="width:300px;height:250px;object-fit:cover">
</div>

object-fit:contain 包含一個元素

使用 object-fit:contain 調整元素內容的大小以使其包含在其容器中。

<div>
  <img style="width:300px;height:250px;object-fit:contain">
</div>

 object-fit:fill 拉伸以適應容器

 使用 object-fit:fill 拉伸元素的內容以適應其容器。

<div>
  <img style="width:300px;height:250px;object-fit:fill">
</div>

 object-fit:scale-down 如果太大則縮小

 以原始大小顯示元素的內容，但在必要時使用 object-fit:scale-down 將其縮小以適合其容器。

<div>
  <img style="width:300px;height:250px;object-fit:scale-down">
</div>

相關文章

• 如何使用 CSS object-fit 等比縮放和裁剪圖像

標簽: object-fit