如何讓div高度自動調整到背景圖片大小?

另一種可能效率低下的解決方案是將圖像包含在<img/>元素集下visibility: hidden;,然後<div>使background-image

這會將<div>設置為<img/>元素中圖像的大小,但將其顯示使用的是背景。

<div style="background-image: url(http://your-image.jpg);">
    <img src="http://your-image.jpg" style="visibility: hidden;" />
</div>

另一種非常好的和很酷的方法,它可以使圖像<img/>元素一樣工作,height會自動調整。你需要知道圖像widthheight比例。將height容器設置為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) */
}

Demo

相關連結:
How to get div height to auto-adjust to background size?

您也可能喜歡這些文章

SEO優化之CSS隱藏關鍵文字

想使用CSS將不必要,但可以增加SEO的關鍵文字隱藏,想要讓google大神搜尋到,又不想在網頁上HTML顯示你這些文字,可以使用下列CSS方法隱藏文字。...