Html 响应图像最大高度100%在firefox中不起作用_Html_Css_Firefox_Google Chrome_Responsive Design

Html 响应图像最大高度100%在firefox中不起作用

html css firefox google-chrome responsive-design

Html 响应图像最大高度100%在firefox中不起作用,html,css,firefox,google-chrome,responsive-design,Html,Css,Firefox,Google Chrome,Responsive Design,我目前正在尝试根据浏览器尺寸调整图像大小。我已经设法使图像水平调整大小，如果我使浏览器窗口缩小，图像将按比例调整大小。然而，当我垂直调整窗口大小时，Firefox似乎并不想这样做！代码非常简单 <body> <div id="content"> <img src="images/abc.jpg"> </div> </body> 另一个问题是，在chrome中，图像看起来确实垂直调整了大小

我目前正在尝试根据浏览器尺寸调整图像大小。我已经设法使图像水平调整大小，如果我使浏览器窗口缩小，图像将按比例调整大小。然而，当我垂直调整窗口大小时，Firefox似乎并不想这样做！代码非常简单

<body>

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

</body>

另一个问题是，在chrome中，图像看起来确实垂直调整了大小，但我必须将浏览器底部拖到图像上方，然后它才能开始这样做。我宁愿在底部内容填充“击中”图像底部时，图像开始重新zise。希望这是有意义的

非常感谢任何帮助

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

-b

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

你注意到的行为是正确的。

答案是，如前所述，根据您的图像是纵向还是横向，还可以指定初始宽度或高度属性。

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

这是你想要的吗

实际上，我只是在html和正文中添加了一个高度，这样内容的高度就不会太高

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

（和框大小：框到内容的边框，因为这似乎是您想要的）

您能提供一个图像示例吗？

abc.jpg

有哪些维度？我认为自从使用填充后，#内容的高度可能会超过100%。基本上，它增加了50+50从顶部和底部！！！要检查，您可以尝试给bodyOk指定一个特定的高度，abc.jpg很大。这样你就可以在任何屏幕上看到尽可能多的细节。比如说1500 x 1000px@huMptyduMpty，有一个固定的高度似乎不起作用sorry@bestfriendsforever：我不想说设置高度会起作用！！！我只是给了你一个想法：）好的，谢谢。虽然这违背了这个图像的目的，因为我希望它能够调整到浏览器的高度，这样你就可以调整浏览器的大小，使其有点“放大”。似乎在这方面做得很好

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