我正在尝试根据浏览器尺寸调整图像大小.我设法让图像水平调整大小,如果我使浏览器窗口缩小,图像将按比例调整大小.然而,当我垂直调整窗口大小时,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中垂直调整大小,但我必须在开始执行此操作之前将浏览器的底部拖到图像上.一旦底部内容填充“击中”图像的底部,我宁愿重新开始重新设置图像.希望这是有道理的.
任何帮助非常感谢
解决方法
试试这个,取自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;
}
