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

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

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

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

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

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

在桌面設備上，這可以正常工作：

在移動設備上也不錯：

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

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

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

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

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

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

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

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

盡管之前的演示有效，但我們?nèi)匀豢梢愿倪M這種方法。到目前為止，我們假設該圖像是無語義內(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ù)量的文本生成這些卡片，這些文本會換行，這可能會使事情過于受限。

即將推出：aspect-ratio

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

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

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

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

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

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

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

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

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