Question

我有一个等级content的div：

.content {
    position: relative;
    height: auto;
    overflow:auto;
    padding: 0;
    width: 100%;
    margin: 0 auto;
    background: URL("img/main.png") center no-repeat;
    background-size: contain;
    display: inline-block;
}

我希望div和里面的图像根据它的容器大小（正文）自动调整大小，所以我已经定义了100％的宽度，我希望高度适应并保持纵横比。

问题是，如果我没有设置像素的任何高度，图像就不会出现。有办法吗？

基本上我想要实现的是自动调整大小，就像在此页面上一样：http://ketrawars.com/

Answer 1

如果您将高度设置为100％，您一定会达到您想要的效果。检查以下风格。

.content {
    position: relative;
    height: 100%;
    overflow:auto;
    padding: 0;
    width: 100%;
    margin: 0 auto;
    background: url("images/image.jpg") center no-repeat;
    background-size: contain;
    display: inline-block;
}

Answer 2

您可以尝试添加min-height: 100%？

Answer 3

你也可以使用简单的jQuery代码来做到这一点

var width=$(".content").width();
$(".content").height(width);

如何根据背景图像的宽度来设置div的高度？

3 个答案: