object-fit CSS 屬性

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

<div class="box">    <img class="pic" src="https://interactive-examples.mdn.mozilla.net/media/examples/plumeria-146x200.jpg" alt=""></div>
.pic {    object-fit: contain;    width: 100%;    height: 100%;}

object-fit 屬性由下列的值中的單獨(dú)一個(gè)關(guān)鍵字來(lái)指定。

contain

被替換的內(nèi)容將被縮放，以在填充元素的內(nèi)容框時(shí)保持其寬高比。整個(gè)對(duì)象在填充盒子的同時(shí)保留其長(zhǎng)寬比，因此如果寬高比與框的寬高比不匹配，該對(duì)象將被添加“黑邊”。

cover

被替換的內(nèi)容在保持其寬高比的同時(shí)填充元素的整個(gè)內(nèi)容框。如果對(duì)象的寬高比與內(nèi)容框不相匹配，該對(duì)象將被剪裁以適應(yīng)內(nèi)容框。

fill

被替換的內(nèi)容正好填充元素的內(nèi)容框。整個(gè)對(duì)象將完全填充此框。如果對(duì)象的寬高比與內(nèi)容框不相匹配，那么該對(duì)象將被拉伸以適應(yīng)內(nèi)容框。

none

被替換的內(nèi)容將保持其原有的尺寸。

scale-down

內(nèi)容的尺寸與 none 或 contain 中的一個(gè)相同，取決于它們兩個(gè)之間誰(shuí)得到的對(duì)象尺寸會(huì)更小一些。

你可以通過(guò)使用 object-position 屬性來(lái)切換被替換元素的內(nèi)容對(duì)象在元素框內(nèi)的對(duì)齊方式。

總的來(lái)說(shuō)，object-fit 用于控制替換元素中的內(nèi)容（如圖片、視頻）的尺寸和適應(yīng)方式，而 background-size 用于控制元素的背景圖片的大小。根據(jù)具體的需求和使用場(chǎng)景，選擇合適的屬性來(lái)控制元素中的圖片或背景圖片的顯示效果。