處理獨(dú)立佈局中的流體圖像如今已相當(dāng)容易。然而，對(duì)於更複雜的界面，我們經(jīng)常需要將圖像放置在響應(yīng)式元素內(nèi)，例如這張卡片：

假設(shè)此圖像是非語(yǔ)義內(nèi)容，僅作裝飾。這非常適合使用background-image 。並且，由於此圖像包含對(duì)象，我們不能在響應(yīng)式佈局時(shí)裁剪任何部分，因此我們選擇background-size: contain 。

問(wèn)題在於：在移動(dòng)設(shè)備上，此卡片方向發(fā)生變化並變?yōu)榇怪狈较?，圖像位於頂部。我們可以使用任何類型的CSS 佈局技術(shù)實(shí)現(xiàn)這一點(diǎn)，並且可能最好使用CSS 網(wǎng)格或彈性盒。

但是，當(dāng)我們測(cè)試較小的屏幕時(shí)，由於contain屬性，我們會(huì)得到以下結(jié)果：

這不太理想。圖像調(diào)整大小以保持其縱橫比，不會(huì)裁剪任何細(xì)節(jié)，如果圖像是重要內(nèi)容並且不應(yīng)裁剪，則我們不能將background-size更改為cover 。

此時(shí)，我們的下一個(gè)嘗試可能很熟悉：將圖像內(nèi)聯(lián)放置，而不是背景。

在桌面設(shè)備上，這可以正常工作：

在移動(dòng)設(shè)備上也不錯(cuò)：

但在較小的屏幕上，由於所有固定大小，圖像的比例會(huì)失真。

我們可以花費(fèi)數(shù)小時(shí)來(lái)調(diào)整圖像、卡片和彈性屬性，來(lái)回調(diào)整。或者，我們可以……

將主要內(nèi)容與背景分離

這是在響應(yīng)式圖像方面獲得更大靈活性和彈性的基礎(chǔ)。雖然並非在所有情況下都能實(shí)現(xiàn)，但在許多情況下，只需在設(shè)計(jì)方面稍加努力即可實(shí)現(xiàn)，尤其是在預(yù)先計(jì)劃這種方法的情況下。

在我們的下一次迭代中，我們將草莓圖像放在透明背景上，並使用CSS 設(shè)置光柵圖像中的藍(lán)色。通過(guò)調(diào)整樣本空間的大小，繼續(xù)在演示中使用視口大小進(jìn)行操作！

仔細(xì)查看樣式，請(qǐng)注意我們還向包含圖像的div 添加了填充，因此草莓不會(huì)過(guò)於靠近邊緣。我們可以通過(guò)此填充完全控制我們希望它們有多近或多遠(yuǎn)。

請(qǐng)注意，我們還使用負(fù)邊距來(lái)補(bǔ)償外部卡片包裝上的填充，否則圖像周圍會(huì)出現(xiàn)空白。

對(duì)內(nèi)聯(lián)圖像使用object-fit 屬性

儘管之前的演示有效，但我們?nèi)匀豢梢愿倪M(jìn)這種方法。到目前為止，我們假設(shè)該圖像是無(wú)語(yǔ)義內(nèi)容——但在此佈局中，圖像插圖也可能不僅僅是裝飾。

如果是這種情況，我們絕對(duì)不希望圖像被裁剪，因?yàn)檫@實(shí)際上相當(dāng)於數(shù)據(jù)丟失。為了防止這種情況，最好將圖像內(nèi)聯(lián)放置而不是背景，我們可以使用object-fit屬性來(lái)實(shí)現(xiàn)。

我們已從背景中提取草莓，它現(xiàn)在是一個(gè)內(nèi)聯(lián)元素，但我們保留了同一圖像div 中的背景顏色。

最後，將object-fit: contain與100%寬度相結(jié)合，可以調(diào)整窗口大小並保持草莓的縱橫比。但是，這種方法的缺點(diǎn)是，我們需要為桌面版本的圖像設(shè)置固定高度——否則它將遵循設(shè)置寬度的比例（降低它會(huì)改變佈局）。如果我們需要使用可變數(shù)量的文本生成這些卡片，這些文本會(huì)換行，這可能會(huì)使事情過(guò)於受限。

即將推出：aspect-ratio

上述問(wèn)題的解決方案可能即將通過(guò)即將推出的aspect-ratio屬性實(shí)現(xiàn)。這將允許設(shè)置元素的固定比例，例如：

 .el {
  aspect-ratio: 16 / 9;
}

這意味著我們將能夠消除固定高度並將其替換為我們計(jì)算的縱橫比。例如，我們最後一個(gè)示例的桌面斷點(diǎn)中的尺寸如下所示：

 .image {
  /* ... */
  height: 184px;
  width: 318px;
}

使用aspect-ratio ，我們可以刪除高度聲明並進(jìn)行計(jì)算以獲得最接近184 的比例：

 .image {
  /* ... */
  width: 318px; /* 基準(zhǔn)寬度*/
  height: unset; /* 重置在媒體查詢之外設(shè)置的高度*/
  aspect-ratio: 159 / 92; /* 接近184px 高度*/
}

如果您想了解更多信息，可以在本文中更深入地探討即將推出的屬性。

最後，有多種方法可以在可變比例佈局中實(shí)現(xiàn)可靠的響應(yīng)式圖像。但是，使這項(xiàng)工作更容易——並且更好——的技巧不一定在於CSS；它可能很簡(jiǎn)單，只需調(diào)整您的圖像，無(wú)論是將前景與背景分離（就像我們所做的那樣），還是選擇即使裁剪了相當(dāng)一部分邊緣仍然有效的特定圖像。

以上是流體圖像以變量比例佈局的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！