css根据背景高度自动调整div高度

Question

div {
    display:block;
    width:320px;
    background:url('images/cnon.jpg');
    background:contain;
}

有没有办法根据背景高度自动调整<div>高度？

Answer 1

我无法理解你真正想要的是什么，但如果你想使div完全与背景对齐：

div {
    display:block;
    width: auto;
    height: auto;
    background:url('images/cnon.jpg');
    background:contain;
    margin: -10px; //Optional
}

很抱歉，如果我不理解你的问题。

Answer 2

如果您可以使用jQuery，只需检查img高度即可处理它，然后将此高度应用于div本身

Answer 3

你可以调整div的高度，调整div的填充顶部，只需要自动设置css。

.div_image{
    background:url('images/cnon.jpg');
    height: 0;
    width: 100%;
    background-size: contain;
    padding-top: 20%;
}

填充顶部由一个公式计算。

(image-height[px] / image-width[px]) * container-width[%]

示例：(274px / 1370px) * 100% = 20%

根据这个结果，填充顶部需要为20％。