Question

我有一个奇怪的问题，在Chrome / Safari中，图像尊重它在没有设置宽度/高度的父级内部的最大宽度/高度样式。但不是在Firefox / Opera中。

<div id="container">
    <figure>
        <img src="http://imaging.nikon.com/lineup/dslr/d90/img/sample/pic_001b.jpg">
    </figure>
</div>

这是图像和它的容器。 CSS如下：

body {
    width: 100%;
    height: 100%;
}
#container {
    width: 90%;
    height: 90%;
    margin: auto;
}
figure {
    position: relative;
    display: inline-block;
    margin: 0;
    vertical-align: top;
    line-height: 0;
}
img {
    height: auto;
    width: auto;
    max-width: 100%;
    max-height: 100%;
}

figure元素仅用于使用:before选择器作为图像的叠加层，但如果它具有设置的宽度/高度则不起作用。有没有办法让Firefox和Opera尊重祖父母的身高/宽度呢？

JSFiddle：http://jsfiddle.net/GUrkj/1/

Answer 1

请参阅here on MDN

具体做法是：

max-height CSS属性用于设置a的最大高度给定的元素。它可以防止高度属性的使用值变得大于为max-height指定的值。

和...

百分比是根据高度来计算的生成的框包含块。如果含有的高度未明确指定块（即，它取决于内容高度），这个元素并不是绝对定位的百分比值被视为无。

最后一部分意味着，至少在Firefox中，如果没有明确说明height值，max-height会变成none - 导致观察到的行为。

因此，您需要至少将height和width添加到figure元素。

Answer 2

在CSS中，当你使用100％时，你总是说＆＃34; 100％＆＃34;我的父母。如果你的父母不受约束，你也是。这里的诀窍是高度是唯一重要的高度，将数字高度设置为100％，但不要设置它的宽度，你应该没事。

Firefox不尊重父级的最大宽度/高度而没有设置宽度/高度

2 个答案: