卡卡網(wǎng)

object-fit(對象擬合)

object-fit有5個(gè)屬性：none、cover、contain、fill、scale-down，它們是用于控制如何調(diào)整被替換元素的內(nèi)容大小的實(shí)用程序。

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

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

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

object-fit:cover 調(diào)整大小以覆蓋容器

使用 object-fit:cover 調(diào)整元素內(nèi)容的大小以覆蓋其容器。

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

object-fit:contain 包含一個(gè)元素

使用 object-fit:contain 調(diào)整元素內(nèi)容的大小以使其包含在其容器中。

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

 object-fit:fill 拉伸以適應(yīng)容器

 使用 object-fit:fill 拉伸元素的內(nèi)容以適應(yīng)其容器。

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

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

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

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

相關(guān)文章

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

標(biāo)簽: object-fit