如何讓div的高度自動調整為背景圖片大小？

實現根據背景圖片大小自動調整div高度

在web開發中，經常希望div的高度自動調整為其背景圖像的大小。但是，為 div 設定特定高度或最小高度會限制其彈性。

有一個創新的解決方案，可以讓背景影像表現得像 img 元素一樣，其高度會自動調整。為此，您需要圖像的寬度和高度比例。

將 div 的高度設為 0，並將其 padding-top 屬性定義為基於影像比例的百分比。下面的程式碼說明了這一點：

div {
    background-image: url('http://www.pets4homes.co.uk/images/articles/1111/large/feline-influenza-all-about-cat-flu-5239fffd61ddf.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 0;
    padding-top: 66.64%; /* (img-height / img-width * container-width) */
                /* (853 / 1280 * 100) */
}

這種方法本質上為您提供了一個具有自動高度的背景圖像，類似於 img 元素。您可以在 http://jsfiddle.net/8m9ur5qj 找到工作原型。調整 div 大小以觀察高度如何根據背景圖像的大小自動調整。

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