css - html 元素的纵横比(在 img 标签内)

Question

为什么会这样？以及如何解决？在我看来，IE 和 Opera 在所有情况下都可以正常工作，但在其他浏览器中的“高度”就不是那么好。

HTML:

<div class="image">
    <img class="data" src="http://www.jpeg.org//images/blue_large_05.jpg" alt=""/>
</div>

CSS(高度):

.image {
    overflow: hidden;        
    width: -moz-max-content;
    width: intrinsic;
    display: inline-block;

    height: 100px; //Is buggy
}

.data {
    width: 100%;
    height: 100%;
    float: left;
}

CSS(宽度):

.image {
    overflow: hidden;        
    width: -moz-max-content;
    width: intrinsic;
    display: inline-block;

    width: 200px;
}

.data {
    width: 100%;
    height: 100%;
    float: left;
}

属性值 intrinsic && -moz-max-content 用于 display:block 中的正确宽度。

Answer 1

我看不出它在做什么。当您将 .img 高度设置为 100% 时，它会成为 父元素高度的 100%。在这种情况下，这会扭曲图像。