html元素的纵横比（img标签内）答案

【问题标题】：Aspect ratio of html element (inside img tag)html元素的纵横比（img标签内）
【发布时间】：2012-11-26 09:27:29
【问题描述】：

为什么会这样？以及如何解决？在我看来，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;
}

display:block 中正确宽度的

属性值 intrinsic && -moz-max-content。

【问题讨论】：

从未听说过intrinsic，对我来说是新事物
为什么会这样？如何解决？

标签： css image html

【解决方案1】：

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

【讨论】：

你期望发生什么？

【解决方案2】：

你应该把高度：auto;为图像。然后浏览器会计算出正确的高度和图片的比例。

【讨论】：