如何讓 Div 的高度回應其背景圖片？

有背景影像的響應式Div 高度

擴充響應式影像的概念，類似的技術可以應用於div 自動調整它們高度基於背景圖像的大小。無需明確設定高度或最小高度，這可以建立流暢且動態的佈局。

解決方案

為了實現這一點，我們可以利用 padding-top 的強大功能。透過將 div 的高度設為 0 並將 padding-top 值設為百分比，我們可以模仿影像元素的行為。

以下是程式碼細分：

div {
    background-image: url('...');
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 0;
    padding-top: (image-height / image-width) * container-width;
}

• 使用所需的圖片 URL 設定背景圖片屬性。
• 使用 background-size: contains 確保影像適合div 而不扭曲其縱橫比。
• 將背景重複設定為不重複以防止影像平鋪。
• 將寬度設為 100% 以實現全角行為。
• 將高度保持為 0 以消除任何強制高度限制。
• 計算 padding-top 值作為以下比率圖像高度除以圖像寬度乘以容器的寬度。這可確保 div 高度進行相應調整。

範例

考慮使用此技術的以下div，其中影像高853 像素，寬1280 像素：

<div>

該div會根據影像的大小自動調整其高度包含，以建立響應式動態佈局元素。

以上是如何讓 Div 的高度回應其背景圖片？的詳細內容。更多資訊請關注PHP中文網其他相關文章！