?

?

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

?

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

object-fit 屬性由下列的值中的單獨(dú)一個關(guān)鍵字來指定。
contain
被替換的內(nèi)容將被縮放，以在填充元素的內(nèi)容框時保持其寬高比。 整個對象在填充盒子的同時保留其長寬比，因此如果寬高比與框的寬高比不匹配，該對象將被添加“黑邊”。
cover
被替換的內(nèi)容在保持其寬高比的同時填充元素的整個內(nèi)容框。如果對象的寬高比與內(nèi)容框不相匹配，該對象將被剪裁以適應(yīng)內(nèi)容框。
fill
被替換的內(nèi)容正好填充元素的內(nèi)容框。整個對象將完全填充此框。如果對象的寬高比與內(nèi)容框不相匹配，那么該對象將被拉伸以適應(yīng)內(nèi)容框。
none
被替換的內(nèi)容將保持其原有的尺寸。
scale-down
內(nèi)容的尺寸與 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>

【擴(kuò)展閱讀】其他與圖像相關(guān)的CSS屬性: object-position, image-orientation, image-rendering, image-resolution。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。