如何让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中文网其他相关文章！