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

属性值内在＆amp;＆amp; -moz-max-content 在显示中正确的宽度：块。

Answer 1

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

Answer 2

你应该放高度：自动;对于图像。然后浏览器将计算正确的高度，图像将以正确的比例。

html元素的宽高比（在img标签内）

2 个答案: