Object-Fit CSS屬性控制圖像或視頻在其容器中的規(guī)模。 1。填充拉伸介質(zhì)以適合，可能會(huì)扭曲它。 2。包含秤介質(zhì)，以完全適合容器，同時(shí)保留長(zhǎng)寬比。 3。覆蓋量表以覆蓋整個(gè)容器，根據(jù)需要裁剪邊緣。 4。沒(méi)有任何媒體以其原始大小而沒(méi)有擴(kuò)展。 5?？s小的行為類似于或包含，無(wú)論顯示出較小的顯示大小。它對(duì)于響應(yīng)迅速的布局和UI組件（例如卡片，滑塊和橫幅）特別有用，在該組件，滑塊和橫幅上，保持視覺(jué)一致性是關(guān)鍵。但是，對(duì)象擬合不適用于背景圖像，并且在Internet Explorer等較舊瀏覽器中可能不支持。將其與對(duì)象位置配對(duì)可以在裁剪時(shí)控制焦點(diǎn)。

當(dāng)您使用CSS中的圖像或視頻并且與容器的大小或縱橫比不匹配時(shí)， object-fit有助于控制它們?cè)谠摽臻g內(nèi)的擴(kuò)展或適合。當(dāng)您想在不扭曲媒體的情況下保持布局一致性時(shí)，這一點(diǎn)尤其有用。

object-fit到底做什么？

簡(jiǎn)而言之， object-fit會(huì)告訴瀏覽器圖像或視頻應(yīng)如何調(diào)整自身以適合其容器。將其視為圖片框架 - 您可以根據(jù)自己的外觀來(lái)伸展照片，中心，裁剪邊緣等。

有五個(gè)主要值：

• fill ：伸展圖像/視頻以填充容器（可以扭曲）
• contain ：擴(kuò)展媒體，使整個(gè)事物都適合，保持縱橫比
• cover ：在保留比率的同時(shí)，邊緣完全覆蓋容器
• none ：顯示原始大小，沒(méi)有縮放
• scale-down ：行為none或contain ，以較小的尺寸

當(dāng)您已經(jīng)設(shè)置了元素上的顯式寬度和高度時(shí)，此屬性效果最好。

如何在實(shí)踐中使用object-fit

假設(shè)您有一個(gè)固定尺寸的卡片布局，所有圖像都需要很好地?cái)M合而不破壞設(shè)計(jì)。以下是不同值可能適用的方式：

• 對(duì)于必須保持居中和無(wú)編寫(xiě)的個(gè)人資料圖片：
  object-fit: cover;與object-position: center;

• 對(duì)于縮略圖網(wǎng)格，所有圖像都應(yīng)顯示完整的內(nèi)容：
  object-fit: contain;確保沒(méi)有任何東西被切斷

• 如果您正在設(shè)計(jì)橫幅和伸展運(yùn)動(dòng)是可以接受的：
  object-fit: fill;將使圖像完全填充該區(qū)域

通常，您通常會(huì)在CSS中寫(xiě)下此內(nèi)容，例如：

 img {
  寬度：100％；
  身高：200px;
  對(duì)象擬合：封面；
}

請(qǐng)記?。撼?code>object-fit擬合的塊級(jí)或替換元素（例如<img alt="圖像和視頻的CSS對(duì)象擬合屬性是什么？" >或<video></video> ），否則對(duì)象擬合不起作用。

您什么時(shí)候應(yīng)該使用它？

一種常見(jiàn)的用例是響應(yīng)式設(shè)計(jì) - 尤其是在處理不同尺寸的用戶更易圖像時(shí)。如果沒(méi)有object-fit ，您可能會(huì)出現(xiàn)尷尬的空白空間或扭曲的視覺(jué)效果。

另一種情況是構(gòu)建UI組件時(shí)，例如：

• 圖像滑塊/旋轉(zhuǎn)木馬
• 尺寸均勻的產(chǎn)品卡
• 適應(yīng)屏幕大小的視頻背景

如果您使用的是Bootstrap或Tailwind之類的框架，則某些公用事業(yè)可能會(huì)將其抽象出來(lái)，但是知道object-fit行為可以使您在需要時(shí)精確地調(diào)整內(nèi)容。

另外，如果您注意到圖像看起來(lái)被壓扁或意外伸展，請(qǐng)檢查是否應(yīng)用object-fit以及使用哪個(gè)值。

一些陷阱和技巧

• object-fit不會(huì)影響背景圖像 - 而是使用background-size 。
• 在IE這樣的較舊瀏覽器中，支持并不是很好，因此如果需要，請(qǐng)考慮后備。
• 如果要調(diào)整裁剪時(shí)的焦點(diǎn)位置，請(qǐng)始終與object-position配對(duì)。

這是一個(gè)快速參考列表：

• ?使用cover物進(jìn)行裁剪的一致填充
• ?使用不惜一切代價(jià)避免contain
• ?不要指望它可以在背景圖像上工作
• ??注意fill的失真

基本上就是這樣 - 一旦您了解每個(gè)價(jià)值的行為，這是一種簡(jiǎn)單的工具。它不會(huì)修復(fù)不良的圖像選擇，但絕對(duì)可以幫助您在布局中更好地管理它們。

以上是圖像和視頻的CSS對(duì)象擬合屬性是什么？的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！