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;
}

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

Answer 1

你应该把 height: auto ; 为图像。然后浏览器将计算正确的高度和图像将在正确的比例。

Answer 2

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