最大高度流体图像响应在Chrome、Firefox等中不起作用，但在Safari中工作
最大高度流体图像响应在Chrome、Firefox等中不起作用，但在Safari中工作
提问于 2015-02-05 00:56:06
我正在尝试完成对高度的图像调整(我知道宽度:100%，高度:自动调整宽度大小)。下面的设置适用于Safari (~8.02)，但Chrome和Firefox (最新版本)根本不在乎。有什么想法吗？如果不存在CSS攻击，我可以使用jQuery解决方案(我猜)。
body, html {
width:100%;
height:100%;
}
body {
background: lightgreen;
}
.full {
width:100%;
}
.block {
background: lightcoral;
width: 80%;
text-align: center;
position: absolute;
}
.logo {
max-width: 100%;
max-height: 80%;
}<div class="full">
<div class="block">
<img src="http://placehold.it/709x534" class="logo">
</div>
</div>
回答 3
Stack Overflow用户
回答已采纳
发布于 2015-02-05 02:58:26
除了上面的CSS，在容器上声明100%的高度(在本例中，是.block)解决了Chrome和Firefox上的问题。它现在与预期的Safari行为匹配。
Stack Overflow用户
发布于 2015-02-05 01:11:36
你是不是想在超过80%的高度后故意歪曲你的形象？看看这篇文章..。Max-height ignored in Firefox, works in Chrome and Safari
Stack Overflow用户
发布于 2015-02-05 03:04:09
除了上面的CSS，在容器上声明100%的高度(在本例中，是.block)解决了Chrome和Firefox上的问题。它现在按照预期匹配Safari行为：
body, html {
width:100%;
height:100%;
}
body {
background: lightgreen;
}
.full {
width:100%;
}
.block {
background: lightcoral;
width: 80%;
text-align: center;
position: absolute;
height: 100%;
}
.logo {
max-width: 100%;
max-height: 80%;
}<div class="full">
<div class="block">
<img src="http://placehold.it/709x534" class="logo">
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/28334427
复制相关文章
相似问题
腾讯云开发者
