Html Internet Explorer响应图像丢失纵横比

无论是否设置了

height:auto

，Internet Explorer有时都会使用

max width:100%

丢失响应图像的纵横比。“有时”取决于使用的图像文件。因此，这不是编码问题，而是IE中的一个小故障，在尝试使用

max width:auto

时，某些图像会出现此问题

一个例子可以在我目前为我妻子建立的网站www.ladyjaneart.com/gallery上看到。在IE和其他浏览器中查看它，了解我的意思

---

我最终可能只会选择固定尺寸，但我很想知道关于这个问题大家都知道些什么。以前有人遇到过这个问题吗？有关图像文件中的哪些条件会导致此问题的任何信息？

交换高度：自动选择最大高度

max-width: 100%;
max-height: 300px;

这是IE中的一个屏幕截图，图像保持纵横比。

---

要保留纵横比，请仅指定高度或宽度，如

宽度：100%

。这就够了。另一个将自动调整

您还可以使用JavaScript确定最大维度，并相应地使用它们

<script type="text/javascript">
    function CalculateImageSize(id){
        var image = document.getElementById(id);
        var height = image.offsetHeight;
        var width = image.offsetWidth;
        ...
        // use height, width to resize image.
    }
</script>

函数CalculateImageSize（id）{
var image=document.getElementById（id）；
var height=image.offsetHeight；
变量宽度=image.offsetWidth；
...
//使用“高度”、“宽度”调整图像大小。
}

您可以使用纯CSS解决您的问题（不需要Javascript）

使用HTML5标记：

HTML:

这样做的目的是

元素包含img和图像，然后自动缩放到figure元素的大小。缩放是为了适应长方体，而不是直接在图像上进行，因此对于假纵横比的选择要少得多

请注意，

标记没有指定宽度或高度，这完全是通过CSS完成的

figure

标记设置尺寸的最大（和最小）大小，然后

figure>img

规则确保图像填充这些给定尺寸

---

另一方面，如果给定

min-

或

max-

属性，但没有给定标准，那么经常会发生的情况是，各种浏览器会与纵横比和布局混淆。例如，给IE一个

max width:

属性而不给它一个标准的

width

属性将导致您提到的那种不一致

如果

width

为100%，则这已经是最大值，因此无需同时定义同一元素的

max width

。与

min width

相同，除非大小是一个百分比或其他非固定变量（例如

rem

s），而不是100%或0%，否则根本不需要它

---

进一步说明：

例如，确保使用

框大小：边框框

，使宽度+填充不大于预期宽度，也有助于正确调整此类内容的框大小<代码>宽度：66%:padding:1rem表示框大小实际上是2rem+66%。因此，如果利润率为33%，这将导致抵消

figure {
    max-width: 400px;/*Or whatever;*/
    width: 40%; /* or Whatever */
    box-sizing:border-box;
}

---

应该没有必要让它成为

！重要信息

figure {
    max-width: 400px;/*Or whatever;*/
    width: 40%; /* or Whatever */

}
figure > img {
    width:100%;
    height:auto;
    margin:0;

}

figure {
    max-width: 400px;/*Or whatever;*/
    width: 40%; /* or Whatever */
    box-sizing:border-box;
}