2

我有一个以像素为单位定义最大高度的容器，然后是一个以百分比定义最大高度的 IMG。在 Chrome 中，这按预期工作，在其他浏览器中，img 只是简单地延伸到容器之外。

任何人都知道哪种行为是正确的，为什么？

<figure>

    <img src="http://images.autostash.com/parts/img/medium/wix/24056.jpg" alt="no picture">     

</figure>

figure {
    max-width: 90px;
    max-height: 90px;
    border: 1px solid red;
}

img {
    max-height: 90%;
    display: block;
    margin: 0 auto;
}

http://jsfiddle.net/Dygerati/wWRJK/

4

2 回答 2

3

根据CSS 高度属性的 MDN 描述，

是相对于包含块的高度计算的。如果未明确指定包含块的高度，则该值计算为 auto。根元素（例如 ）上的百分比高度是相对于视口的。

结果，由于您只有max-height和min-height声明，而不是height，因此img高度默认为auto.

于 2013-06-19T18:59:10.980 回答
0

Try this.

figure {
    max-width: 90px;
    height: 90px;
    border: 1px solid red;
}
于 2013-06-19T18:50:37.120 回答