CSS div背景圖片RWD Background-img

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

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

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

另一種非常好的和很酷的方法，它可以使圖像<img/>元素一樣工作，height會自動調整。你需要知道圖像width和height比例。將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?