[譯] 使用 CSS object-fit 屬性裁剪圖片

原文連接：Cropping Images in CSS With object-fit

曾經是否想要一張圖片精確地適配某個尺寸大小、但同時還要保持它的長寬比、避免出現圖片被壓扁的狀況？在很長一段時間內，使用 CSS 很難作到這一點。但如今 object-fit 屬性就能解決這個問題了！

除了 inherit、initial 和 unset 這三個值，object-fit 還有另外 5 個可能的取值：

• contain：保持圖片原始的長寬比，調整圖片尺寸，使高度或寬度（二者中較長的一個）可以適應給定的尺寸。
• cover：保持圖片原始的長寬比，圖像區域徹底被圖片徹底覆蓋。
• fill：默認值。圖片徹底填充於圖像區域，即便付出會損失原始長寬比的代價。
• none：圖片尺寸不會被調整。原始圖片大小直接鋪在圖像區域。
• scale-down：在取值 contain、none 狀況下，較小的那個。

下面有一張圖片， 它的原始尺寸是：寬 1200px，高 674px。 咱們設置成一半大小顯示，即 600px * 337px。

若是在不改變高度的狀況下，將寬度再設置爲 300px。那麼圖片原始的長寬比改變了，圖片表現爲被縱向壓扁了：

使用 object-fit 就能夠解決這個問題。咱們來看看。

object-fit: contain

由上圖可見，整張圖片被完整的包含在（contain）在圖像區域了。

object-fit: none

由於圖片的原始尺寸大於圖像區域，所以這裏僅顯示了原始圖片的中間部分。

object-fit: cover

「cover」這個單詞是「封面」的意思。看上面的 object-fit: cover 的最終呈現效果：整個圖片的高是徹底呈現的，對應的寬（保持原始長寬比的狀況下）則不能徹底顯示，只顯示了中間的部分。也就是說，所謂的封面效果，就是先保證圖片的寬、高裏較小的那一方先徹底呈現，另一方則截取呈現。

object-fit: fill

object-fit: scale-down

對比取值 contain、none 下的效果，取值 contain 的時候，圖片渲染尺寸更小，所以 object-fit: scale-down 的呈現效果與 object-fit: contain 一致。

這些例子裏，object-fit: cover 是最符合咱們預期的。

object-position

如今，假設圖片已經按照咱們的 object-fit 設置進行裁剪了，但圖片的顯示位置不是你想要的，這時候，就能夠使用object-position 屬性來精確控制圖片顯示區域。

咱們以 object-fit: cover 爲例：

.alligator-turtle {
  object-fit: cover;

  width: 300px;
  height: 337px;
}
複製代碼

如今，咱們修改圖像可見部分在 X 軸上的位置，這樣咱們就能夠看到圖像的最右邊了：

.alligator-turtle {
  object-fit: cover;
  object-position: 100% 0;

  width: 300px;
  height: 337px;
}
複製代碼

譯者注：object-position 屬性的默認值是 50% 50%，這就是上面看到的裁剪圖片居中顯示的緣由所在。

最後，來看下若是提供的是一個超出邊界的值結果如何：

.alligator-turtle {
  object-fit: cover;
  object-position: -20% 0;

  width: 300px;
  height: 337px;
}
複製代碼

兼容性

（正文完）