如何讓div的高度根據背景圖片動態調整？

解決帶有背景圖像的Div 元素的動態高度難題

如何確保div 元素優雅地調整其高度以匹配您分配的背景影像的大小，無需手動指定固定高度或最小值高度？

揭開自動調整背景圖像技術

Web 開發人員設計了一種巧妙的解決方案，可以模仿帶有背景圖像的div 元素的圖像元素的行為。透過利用影像的長寬比，您可以動態確定容器 div 的高度。

逐步實現：

1. 設定容器 div 的高度div 元素設定為 0。
2. 使用影像高寬比乘以容器的高度來計算padding-top 百分比width.

例如，給定高度為853 像素、寬度為1280 像素、div 寬度為100% 的圖片：

padding-top: 66.64% /* (img-height / img-width * container-width) */
/* (853 / 1280 * 100) */

CSS範例：

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

實用應用：

此技術可賦予 div 元素自動調整其高度以適應背景影像的能力。它類似於使用 img 元素，但不需要明確高度或最小高度聲明。

查看此工作範例：http://jsfiddle.net/8m9ur5qj/

By調整容器大小，您可以看到div 的高度如何動態變化，同時保留背景圖像的寬高比。

以上是如何讓div的高度根據背景圖片動態調整？的詳細內容。更多資訊請關注PHP中文網其他相關文章！