Question

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

任何帮助非常感谢

Answer 1

试试这个，取自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;
}

Answer 2

由于高度可能会永远持续下去，因此您无法将相对于浏览器窗口的任何内容的高度设置为百分比的函数。我所说的是你需要把它放在一个固定高度的东西里才能使用百分之一的价值。祝你好运！

-b

Answer 3

您只指定了“max-height”和“max-width”属性。如果未指定实际的“宽度”或“高度”属性，则图像首先采用其物理尺寸的宽度和高度（如果不大于指定的最大高度和最大宽度）。

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

Answer 4

that你想要的是什么吗？

我实际上只是为html和body增加了一个高度，所以#contents的高度不会很高。

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

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

响应式图像最大高度100％在Firefox中无效

4 个答案: