?

?

object-fit CSS 屬性指定可替換元素的內容應該如何適應到其使用的高度和寬度確定的框。

?

您可以通過使用 object-position 屬性來切換被替換元素（如：<iframe><video><embed><img>以及在某些情況下的<option>
<audio><canvas><object><applet>）的內容對象在元素框內的對齊方式。

object-fit 屬性由下列的值中的單獨一個關鍵字來指定。
contain
被替換的內容將被縮放，以在填充元素的內容框時保持其寬高比。 整個對象在填充盒子的同時保留其長寬比，因此如果寬高比與框的寬高比不匹配，該對象將被添加“黑邊”。
cover
被替換的內容在保持其寬高比的同時填充元素的整個內容框。如果對象的寬高比與內容框不相匹配，該對象將被剪裁以適應內容框。
fill
被替換的內容正好填充元素的內容框。整個對象將完全填充此框。如果對象的寬高比與內容框不相匹配，那么該對象將被拉伸以適應內容框。
none
被替換的內容將保持其原有的尺寸。
scale-down
內容的尺寸與 none 或 contain 中的一個相同，取決于它們兩個之間誰得到的對象尺寸會更小一些。?

fill | contain | cover | none | scale-down

demo:

<div><h2>object-fit: fill</h2><img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="fill"/><img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="fill narrow"/><h2>object-fit: contain</h2><img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain"/><img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain narrow"/><h2>object-fit: cover</h2><img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="cover"/><img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="cover narrow"/><h2>object-fit: none</h2><img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="none"/><img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="none narrow"/><h2>object-fit: scale-down</h2><img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="scale-down"/><img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="scale-down narrow"/></div>
<style>
h2 {font-family: Courier New, monospace;font-size: 1em;margin: 1em 0 0.3em;
}div {display: flex;flex-direction: column;flex-wrap: wrap;align-items: flex-start;height: 940px;
}img {width: 150px;height: 100px;border: 1px solid #000;
}.narrow {width: 100px;height: 150px;margin-top: 10px;
}.fill {object-fit: fill;
}.contain {object-fit: contain;
}.cover {object-fit: cover;
}.none {object-fit: none;
}.scale-down {object-fit: scale-down;
}
</style>

【擴展閱讀】其他與圖像相關的CSS屬性: object-position, image-orientation, image-rendering, image-resolution。

總結

以上是生活随笔為你收集整理的鲜为人知的object-fit属性，让您的img图片不再因为固定宽高而被拉伸压缩的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。