8

我目前正在尝试根据浏览器尺寸调整图像大小。我已经设法让图像水平调整大小，如果我让浏览器窗口变窄，图像将按比例调整大小就好了。但是，当我垂直调整窗口大小时，Firefox 似乎不想这样做！代码很简单

<body>

    <div id="content">
        <img src="images/abc.jpg">
    </div>      

</body>

和CSS：

#content {  
    height: 100%;
    padding: 50px;
}


#content img{
    max-height:100%;
    max-width: 100%;
}

另一个问题是图像似乎确实在 chrome 中垂直调整大小，但我必须在开始执行此操作之前将浏览器的底部拖到图像上方。可以说，一旦底部内容填充“击中”图像底部，我宁愿图像开始调整。希望这是有道理的。

非常感谢任何帮助

4

4 回答 4

2

试试这个，取自 Twitter bootstrap 2

html,body{height:100%;}
#content {padding: 5%;}
#content img {
max-height: 100%;/* Part 1: Set a maxium relative to the parent */
width: auto\9;
/* IE7-8 need help adjusting responsive images */
max-width: auto; 
/* Part 2: Scale the height according to the width, otherwise you get stretching */
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
于 2012-12-13T08:32:37.740 回答
1

因为高度可能永远持续下去，所以您不能将任何相对于浏览器窗口的高度设置为百分比的函数。我的意思是你需要把它放在一个固定高度的东西里面才能使用百分比值。祝你好运！

-b

于 2012-08-06T15:20:37.777 回答
0

您只指定了“最大高度”和“最大宽度”属性。如果您没有指定实际的“宽度”或“高度”属性，则图像最初会采用其物理尺寸的宽度和高度（如果不大于指定的最大高度和最大宽度）。

说，你注意到的行为是正确的。答案是，如前所述，还要指定初始宽度或高度属性，这取决于您的图像是纵向还是横向。

于 2012-08-06T15:20:59.933 回答
0

那是你想要的吗？

我实际上只是为 html 和 body 添加了一个高度，因此 #contents 高度不会太高。

body, html {
    height: 100%;
    margin: 0;
    padding: 0;
}

（和 box-sizing:border-box 到#content，因为看起来你想要那个）

于 2012-12-13T08:43:04.517 回答