Question

有没有办法如何使用CSS自动调整图像的高度？

我在网站的左侧有一个菜单。图像大小为216 x 504。

宽度没问题，但图像的高度将自动调整大小取决于显示器的屏幕分辨率。

这是我的HTML：

<div class="menu-bg">
<img src="image/bg_menu.png" alt=""  />
</div>

这是我的css：

.menu-bg
{
    position:absolute;
    top:130px;
    left:0px;
    height: auto;
}

height: auto;无效。我已经尝试过谷歌，但结果始终是height:auto无效。我正在使用Mozilla Firefox作为浏览器。

感谢任何评论。

谢谢

Answer 1

.menu-bg img{ height:auto; } 使用此css并尝试

您正在做的是给容器一个自动高度而不是图像。

Answer 2

您可以使用媒体查询根据分辨率控制图像的高度。你可以使用max-height属性。

Answer 3

试试这个：

.menu-bg {
height:100%; /* remove this if it doesn't work at first */
position:absolute;
top:130px;
left:0px;
}

.menu-bg img {
height:auto;
}

Answer 4

试试这个jquery

$(document).ready(function() {
    var height = $(window).height();
    $('.menu-bg').css('height',height);
});

Answer 5

你尝试过这个：

.menu-bg{
    position:absolute;
    top:130px;
    left:0px;
    height: auto;
    border:2px solid red;

    width:216px;
    max-height:504px;
    height:80%;
}
.menu-bg img{
    width:100%;
    height:100%;
}

“身高：80％”可根据您的需要进行调整......;

Answer 6

对于position: absolute的元素，您必须在px或%中定义至少一个宽度或高度，但只有在父元素具有该定义时才能定义百分比值参数 - 自动宽度始终为100％，但没有父元素高度设置的高度auto将不起作用。

CSS：自动调整高度

6 个答案: