HTML – 响应式图像最大高度100％在Firefox中不起作用

发布时间：2020-12-14 16:37:36 所属栏目：资源来源：网络整理

导读：我正在尝试根据浏览器尺寸调整图像大小.我设法让图像水平调整大小,如果我使浏览器窗口缩小,图像将按比例调整大小.然而,当我垂直调整窗口大小时,Firefox似乎并不想这样做！代码非常简单 body div id="content" img src="images/abc.jpg" /div /body 和CSS： #

我正在尝试根据浏览器尺寸调整图像大小.我设法让图像水平调整大小,如果我使浏览器窗口缩小,图像将按比例调整大小.然而,当我垂直调整窗口大小时,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: auto9;
/* 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;
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!