2

有没有办法如何使用 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 作为浏览器。

任何意见表示赞赏。

谢谢

4

6 回答 6

2

.menu-bg img{ height:auto; } 使用这个 CSS 并尝试

您正在做的是为容器而不是图像提供自动高度。

于 2013-08-27T14:35:46.373 回答
1

试试这个jquery

$(document).ready(function() {
    var height = $(window).height();
    $('.menu-bg').css('height',height);
});
于 2013-08-27T17:44:30.160 回答
1

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

于 2016-12-04T02:07:13.563 回答
0

尝试这个：

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

.menu-bg img {
height:auto;
}
于 2013-08-27T14:51:07.083 回答
0

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

于 2013-08-27T14:37:21.757 回答
0

你试过这个吗：

.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%;
}

"height:80%" 可以根据您的需要进行调整...；

于 2016-10-03T07:50:33.253 回答