英文 | https://dewaun-ayers.medium.com/fix-your-images-with-one-line-of-css-a3fb0ceed629
翻譯 | 楊小愛
您是否曾經擺弄過 img 标簽的尺寸，結果卻對結果感到失望？你有沒有嘗試過重用一些你制作的 img 元件卻發現 img src 被拉伸或扭曲了？
好吧，我為您找到了一個解決方案！
輸入 CSS object-fit — 一個很酷的 CSS 屬性，它允許您定義 img src 如何适應 img 标簽及其結果内容框的定義寬度和高度。
object-fit 有五個值可供選擇：
- none：img src 根本沒有調整大小。
- fill：img 标簽的預設值。設定 img src 以填充元素内容框。當 img 内容框和 src 内容縱橫比不同時，img src 被拉伸/扭曲
- contain：縮放 img src 以使其适合 img 内容框，同時保持其縱橫比。
- cover：img src 的大小可以保持其自身的縱橫比。如果元素不适合 img 内容框，則将其剪裁。
- scale-down：img src 被縮放到 img 内容框邊界内的最小可能大小。這可以是 img src 預設尺寸（與應用 none 相同）或應用 contains 的結果——以最小的一個會給你類似的體驗。
這是應用填充的預設視圖。請注意所有徽标是如何拉伸的。tech360、TNB Venture 和 Residences Singapore 的标志格外引人注目。
這是相同的視圖，但應用了包含。現在，我們可以看到與 img 内容框相關的徽标更真實的表示。
這是應用cover時的樣子。所有的标志都試圖填充 img 标簽的内容框，tech360 被剪裁在中心。
這是應用scale-down後的外觀。請注意每個徽标如何盡可能小。在某些情況下，徽标的大小與應用了包含的大小相同。在其他情況下，它們更接近于未應用時的大小。
最後，這是應用none時的樣子。這允許每個徽标的大小為其預設尺寸。
總結
以上就是這篇文章的全部内容，如果您覺得它對您有幫助的話，記得給我點贊，同時，也可以分享給您的朋友，也許也能幫助到他。
最後，感謝您的閱讀，祝您編碼愉快！