卡卡網(wǎng)

你可能會遇到在處理圖像時希望保留原始縱橫比的情況。保持縱橫比可以防止圖像因被拉伸或擠壓而出現(xiàn)扭曲。此問題的常見解決方案是使用background-image CSS 屬性。更現(xiàn)代的方法是使用object-fit CSS 屬性。

在本文中，我們將探索 object-fit 各個屬性值的效果，了解 fill、cover、contain、none、scale-down 是如何縮放和裁剪圖像的。我們還將探索 object-position CSS 屬性以及它如何偏移圖像。

示例圖像默認效果

我們將用下面代碼顯示示例圖像：

<img src="1.jpg" 
     width="500"
     height="280"
     style="width: 500px; height: 280px;"
     alt="圖像縮放到 500 x 280"
>

此代碼將在瀏覽器中產(chǎn)生以下結(jié)果：

此圖像的原始寬度為 1000 像素，高度為 560 像素。使用img屬性，寬度設(shè)置為原始尺寸的一半 500，高度也設(shè)為原始尺寸的一半 280 ，以保留縱橫比。

現(xiàn)在，布局圖像占據(jù) 250px 寬度和 280px 高度的情況： 

<div style="width:500px; height:280px; text-align: center; margin-bottom: 0.5em; margin-top: 0.5em; background:#ccc; border:1px solid #999999;">
<img src="1.jpg" 
    width="500" 
    height="280" 
    style="width: 250px; height: 280px" 
    alt="圖像縮放到 250 x 280。">
</div>

此代碼將在瀏覽器中產(chǎn)生以下結(jié)果：

生成的圖像不再保留原始縱橫比，并且在視覺上似乎“被擠壓”了。

使用object-fit: fill

該fill值是object-fit的初始值，此值不會保留原始縱橫比。

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

此代碼將在瀏覽器中產(chǎn)生以下結(jié)果：

由于這是瀏覽器渲染引擎的“初始”值，因此縮放圖像的外觀沒有變化，生成的圖像仍然顯得被壓扁。

使用object-fit: cover

該cover值保留原始縱橫比，但圖像占用所有可用空間。 

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

此代碼將在瀏覽器中產(chǎn)生以下結(jié)果：       

 在某些情況下，object-fit: cover會導致圖像出現(xiàn)裁剪。在此示例圖像中，左側(cè)和右側(cè)的原始圖像的某些部分不會出現(xiàn)，因為它們無法容納在聲明的寬度范圍內(nèi)。

使用object-fit: contain

該contain值保留原始縱橫比，但圖像也被限制為不超過可用空間的范圍。

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

此代碼將在瀏覽器中產(chǎn)生以下結(jié)果：

 在某些情況下，object-fit: contain會導致圖像沒有填滿所有可用空間。在此示例圖像中，圖像上方和下方都有垂直空間，因為聲明的高度高于按比例縮小的高度。

使用object-fit: none

該none值根本不會調(diào)整圖像大小。

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

此代碼將在瀏覽器中產(chǎn)生以下結(jié)果：

在圖像大于可用空間的情況下，它會出現(xiàn)裁剪。在此示例圖像中，左側(cè)、右側(cè)、頂部和底部的原始圖像的某些部分不會出現(xiàn)，因為它們無法容納在聲明的寬度和高度范圍內(nèi)。

使用object-fit: scale-down

該scale-down值將顯示類似圖像contain或none取決于哪個會導致較小的圖像。

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

此代碼將在瀏覽器中產(chǎn)生以下結(jié)果：

在此示例圖像中，圖像已按比例縮小以表現(xiàn)得像contain。

使用object-fit和object-position

如果從中生成的圖像object-fit出現(xiàn)裁剪，則默認情況下圖像將居中顯示。該object-position屬性可用于更改焦點。

考慮object-fit: cover之前的例子：

現(xiàn)在讓我們改變圖像可見部分在 X 軸上的位置，以顯示圖像的最右邊：

<img
  ...
  style="width: 250px; height: 280px; object-fit: cover; object-position: 100% 0;"
  ...
/>

此代碼將在瀏覽器中產(chǎn)生以下結(jié)果：

在此示例圖像中，以圖像的最右邊為基準進行裁剪，跟前面使用cover不同了。

最后，讓我們觀察一下如果指定的位置超出了可用空間的范圍會發(fā)生什么：

<img
  ...
  style="width: 250px; height: 280px; object-fit: cover; object-position: -20% 0;"
  ...
/>

此代碼將在瀏覽器中產(chǎn)生以下結(jié)果：

在此示例圖像中，是以圖像的左側(cè)為基準進行裁剪。也有間距來彌補圖像左側(cè)偏移的 20%。

結(jié)論

在本文中，介紹了object-fit和object-position的CSS屬性值，它們很好地對圖像進行縮放顯示，保持縱橫比防止圖像因被拉伸或擠壓而出現(xiàn)扭曲。

標簽: object-fit