流體圖像以變量比例佈局

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

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

問題在於：在移動設備上，此卡片方向發生變化並變為垂直方向，圖像位於頂部。我們可以使用任何類型的CSS 佈局技術實現這一點，並且可能最好使用CSS 網格或彈性盒。

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

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

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

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

在移動設備上也不錯：

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

我們可以花費數小時來調整圖像、卡片和彈性屬性，來回調整。或者，我們可以……

將主要內容與背景分離

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

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

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

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

對內聯圖像使用object-fit 屬性

儘管之前的演示有效，但我們仍然可以改進這種方法。到目前為止，我們假設該圖像是無語義內容——但在此佈局中，圖像插圖也可能不僅僅是裝飾。

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

我們已從背景中提取草莓，它現在是一個內聯元素，但我們保留了同一圖像div 中的背景顏色。

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

即將推出：aspect-ratio

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

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

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

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

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

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

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

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

以上是流體圖像以變量比例佈局的詳細內容。更多資訊請關注PHP中文網其他相關文章！