卡卡網(wǎng)

在本文中，我們將介紹如何使用object-fit，以及一些實(shí)際用例和建議。

我們并不總是能夠?yàn)?HTML 元素加載不同大小的圖像，如果我們使用與圖像縱橫比不成比例的寬度和高度，則圖像可能會被壓縮或拉伸。為解決此問題，我們可以為img元素使用object-fit。

首先，讓我們看一看下圖：

 一張好看的照片，在卡片組件中使用時會被擠壓 

為什么會這樣？

圖像具有縱橫比，瀏覽器使用該圖像填充包含框，如果圖像的縱橫比與為其指定的寬度和高度不同，則結(jié)果將是壓縮或拉伸的圖像。

我們在下圖中看到了這一點(diǎn)：

 
圖像的縱橫比與包含框不同，圖像被拉伸

解決方案

當(dāng)圖像的縱橫比與包含元素的寬度和高度不一致時，我們并不總是需要添加不同大小的圖像。我們可以通過裁剪圖片的方法，保留圖像的縱橫比并防止其被擠壓。而CSS的object-fit就具有這樣的作用。

CSS object-fit

該object-fit屬性定義了被替換元素的內(nèi)容（例如img或video應(yīng)該如何調(diào)整大小以適應(yīng)其容器）。object-fit的默認(rèn)值是fill，這可能會導(dǎo)致圖像被擠壓或拉伸。

讓我們它的幾個屬性值。

object-fit: contain

使用object-fit: contain，圖像將調(diào)整大小以適應(yīng)其容器的縱橫比。如果圖像的縱橫比與容器的不匹配，它將被加黑。

 
用object-fit: contain時，圖像將被相應(yīng)地調(diào)整大小

object-fit: cover

使用object-fit: cover，圖像也將被調(diào)整大小以適應(yīng)其容器的縱橫比，如果圖像的縱橫比與容器的不匹配，那么它將被裁剪以適應(yīng)。

 
使用object-fit: cover時，圖像將被剪裁以適合或相應(yīng)地調(diào)整大小

object-fit: fill

使用object-fit: fill，圖像將被調(diào)整大小以適應(yīng)其容器的縱橫比，如果圖像的縱橫比與容器的不匹配，它將被擠壓或拉伸。我們不希望那樣。

 
使用object-fit: fill時，圖像將被相應(yīng)地壓縮、拉伸或調(diào)整大小

object-fit: none

使用object-fit: none時，圖像根本不會調(diào)整大小，既不會拉伸也不會壓縮。它像cover值一樣工作，但它不尊重其容器的縱橫比。

 
使用 時object-fit: none，如果圖像的尺寸不相同，則不會調(diào)整圖像大小

除了object-fit，我們還有object-position屬性，它負(fù)責(zé)將圖像定位在其容器中。

object-position的可能值

該object-position屬性的工作方式類似于 CSS 的background-position屬性：

 
大多數(shù)時候，使用默認(rèn)值（即 `center` 或 `50% 50%`）

當(dāng)包含框的縱橫比垂直較大時，top和bottom關(guān)鍵字也有效。

 
比較object-position: top（左）和object-position: bottom（右）

用例和例子

object-fit: cover一個完美的用例是用戶頭像。頭像允許的縱橫比通常是正方形的。將圖像放在方形容器中可能會扭曲圖像。

 
object-fit有和沒有object-fit: cover的用戶頭像的比較

1、標(biāo)志列表

列出企業(yè)的客戶很重要。為此，我們經(jīng)常會使用徽標(biāo)。因?yàn)榛諛?biāo)會有不同的大小，所以我們需要一種方法來調(diào)整它們的大小而不會扭曲它們。

值得慶幸的是，object-fit: contain這是一個很好的解決方案。 

.logo__img {
    width: 150px;
    height: 80px;
    object-fit: contain;
}

 
使用object-fit: contain可以幫助我們在不扭曲客戶徽標(biāo)的情況下調(diào)整其大小

2、文章縮略圖

這是一個非常常見的用例。文章縮略圖的容器可能并不總是具有相同縱橫比的圖像。

.article__thumb {
    object-fit: cover;
}

 
借助object-fit: cover

3、使用object-fit: contain為圖像添加背景

你知道你可以為img添加背景顏色嗎？我們可以使用object-fit: contain。

在下面的示例中，我們有一個圖像網(wǎng)格。當(dāng)圖像和容器的縱橫比不同時，會出現(xiàn)背景色。

img {
    object-fit: contain;
    background-color: #def4fd;
}

 
我們可以使用object-fit: contain為圖像添加背景顏色

結(jié)論

正如我們所見，使用object-fit處理圖像縱橫比非常有用。我們并不總是能夠控制為每個圖像設(shè)置完美的尺寸，而這正是這個功能的亮點(diǎn)所在。

相關(guān)文章

• 使用 css object-fit 對象擬合調(diào)整圖片大小
• 如何使用 CSS object-fit 等比縮放和裁剪圖像

標(biāo)簽: object-fit