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

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

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

但是，當我們測試較小的屏幕時，由於contain屬性，我們會得到以下結(jié)果：

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

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

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

在移動設(shè)備上也不錯：

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

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

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

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

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

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

請注意，我們還使用負邊距來補償外部卡片包裝上的填充，否則圖像周圍會出現(xiàn)空白。

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

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

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

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

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

即將推出：aspect-ratio

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

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

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

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

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

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

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

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

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