我已经设置了一个图像,其 css 设置为 220 像素的最大高度和 100% 的高度。
应该将(此)图像宽度设置为 175 像素,将高度设置为 220 像素。它在 Firefox 和 Internet Explorer 中运行流畅,但在 Chrome(台式机、平板电脑和智能手机)中,它将高度设置为 220px,但宽度(!)也设置为 220px。这是为什么,这是 Chrome 中的某种错误还是我只是在这里遗漏了什么。
奇怪的是,如果你删除 height:100% 部分,那么你只剩下 max-height:220px,这个问题就不会发生。
查看下面更详细的示例
figure {
width: 100%;
max-height: 220px;
}
a {
width: 100%;
display: inline-block;
text-align: center;
}
img {
height: 100%;
max-height:220px;
}
http://jsfiddle.net/be5jT/ JS fiddle 示例
最佳答案
发生了什么:
如果您使用检查器工具,浏览器会添加 width:auto;
,因为没有声明宽度规则。我进行了一些研究,但找不到任何原因来解释为什么,但事实是 Chrome 和 Firefox 计算“width:auto”的方式不同。 Firefox 是按比例计算,Chrome 是原生显示。
我检查了 CSS2.1 宽度规范,由于我们讨论的是内联图像,因此我们需要检查大量条件。我认为适用于此的是:
Otherwise, if 'width' has a computed value of 'auto', and the element has an intrinsic width, then that intrinsic width is the used value of 'width'.
Source - http://www.w3.org/TR/CSS2/visudet.html#inline-replaced-width
如果我没看错,这意味着 Chrome 在技术上是正确的,即使 Firefox 的方法最终看起来更好。
替代修复方法:
lili2311 的答案可行,但您必须声明宽度,这意味着您必须使用相同比例的图像。您还可以删除您已经知道的 height:``00%
。第三种方法是给 a
height:100%
,将 max-height:220px
更改为 height:220px
在 figure
上,然后从 img
中删除 max-height
。这让您只需声明一次 220px
。
代码:
figure {
width: 100%;
height: 220px;
}
a {
width: 100%;
height:100%;
display: inline-block;
text-align: center;
}
img {
height: 100%;
width:auto;
}
工作演示:
关于html - 最大高度属性使图像在 chrome 中不成比例?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24996392/