英文 | https://dewaun-ayers.medium.com/fix-your-images-with-one-line-of-css-a3fb0ceed629

翻譯 | 楊小愛

您是否曾經(jīng)擺弄過 img 標(biāo)簽的尺寸，結(jié)果卻對結(jié)果感到失望？你有沒有嘗試過重用一些你制作的 img 組件卻發(fā)現(xiàn) img src 被拉伸或扭曲了？

好吧，我為您找到了一個(gè)解決方案！

輸入 CSS object-fit — 一個(gè)很酷的 CSS 屬性，它允許您定義 img src 如何適應(yīng) img 標(biāo)簽及其結(jié)果內(nèi)容框的定義寬度和高度。

object-fit 有五個(gè)值可供選擇：

none：img src 根本沒有調(diào)整大小。
fill：img 標(biāo)簽的默認(rèn)值。設(shè)置 img src 以填充元素內(nèi)容框。當(dāng) img 內(nèi)容框和 src 內(nèi)容縱橫比不同時(shí)，img src 被拉伸/扭曲
contain：縮放 img src 以使其適合 img 內(nèi)容框，同時(shí)保持其縱橫比。
cover：img src 的大小可以保持其自身的縱橫比。如果元素不適合 img 內(nèi)容框，則將其剪裁。
scale-down：img src 被縮放到 img 內(nèi)容框邊界內(nèi)的最小可能大小。這可以是 img src 默認(rèn)尺寸（與應(yīng)用 none 相同）或應(yīng)用 contains 的結(jié)果——以最小的一個(gè)會(huì)給你類似的體驗(yàn)。

這是應(yīng)用填充的默認(rèn)視圖。請注意所有徽標(biāo)是如何拉伸的。tech360、TNB Venture 和 Residences Singapore 的標(biāo)志格外引人注目。