响应式图像最大高度 100% 在 Firefox 中不起作用答案

【问题标题】：Responsive image max height 100% doesnt work in firefox响应式图像最大高度 100% 在 Firefox 中不起作用
【发布时间】：2012-08-03 14:02:39
【问题描述】：

我目前正在尝试根据浏览器尺寸调整图像大小。我已经设法让图像水平调整大小，如果我让浏览器窗口变窄，图像将按比例调整大小就好了。但是，当我垂直调整窗口大小时，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 中垂直调整大小，但我必须将浏览器的底部拖到图像上，然后才能开始执行此操作。可以说，一旦底部内容填充“击中”图像底部，我宁愿图像开始调整。希望这是有道理的。

非常感谢任何帮助

【问题讨论】：

你能提供一个图片样本吗？ abc.jpg 有哪些维度？
我认为 #content 的高度可能会超过 100%，因为您使用了填充。基本上，它从顶部和底部添加 50+50 !!!要检查，您可以尝试为 body 指定特定高度
好的，abc.jpg 很大。这样您就可以在任何屏幕上看到尽可能多的细节。说 1500 x 1000 像素
@huMpty duMpty，设置高度似乎不起作用抱歉
@bestfriendsforever：我不想说设置高度会起作用！！！我只是给你的想法:)

标签： html css firefox google-chrome responsive-design

【解决方案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;
}

【讨论】：

【解决方案2】：

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

-b

【讨论】：

好的，谢谢。虽然这违背了这张图片的目的，因为我希望它调整到高度以及浏览器，以便您可以调整浏览器的大小以“放大”。似乎在this website 上工作正常@跨度>

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

that是你想要的吗？

我实际上只是给 html 和 body 添加了一个高度，这样 #contents 的高度就不会太高了。

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

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

【讨论】：