Internet Explorer响应图像丢失宽高比

Question

无论是否设置max-width: 100%，Internet Explorer有时会使用height: auto丢失响应式图像的宽高比。有时＆＃39;取决于使用的图像文件。因此，这不是编码问题，而是在尝试使用max-width: auto时某些图像中出现的IE故障。

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

我可能最终会采用固定尺寸，但我很想知道这个问题的知识。以前有人遇到过这个问题吗？关于图像文件中的条件会导致它的任何信息？

Answer 1

要保留宽高比，请仅指定高度或宽度，例如class Account after_create :give_creator_id def give_creator_id creator_id = accounts_permissions.first.user_id end end 。足够了。另一个将自动调整。

您还可以使用JavaScript确定 max dimensions 并相应地使用它们。

width:100%

Answer 2

交换高度：自动为最大高度。

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

这是IE中的截图，图像保持宽高比。

Answer 3

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

使用HTML5标记：

HTML：

<figure>
<img src='thepicture.jpg' alt='image'>
</figure>

CSS：

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

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

}

这样做的是<figure>元素包含img和图像然后自动缩放到图元素的大小。完成缩放以适合框，而不是直接适合图像，因此虚假宽高比的选项要少得多。

请注意<img>标记未指定宽度或高度，这完全使用CSS完成。

figure标记设置尺寸的最大（和最小）尺寸，然后figure >img规则确保图像填充这些给定的尺寸。

另一方面，如果给出min-或max-属性但未给出标准，各种浏览器会与宽高比和布局混淆。例如，给IE一个max-width:属性而不给它一个标准的width属性会导致你提到的那种不一致。

如果width为100％，那么这已经是最大值，因此无需定义同一元素的max-width。与min-width相同，除非大小是百分比或其他非固定变量（例如rem s）不是100％或0％，否则根本不需要它。

进一步说明：

例如，通过确保使用box-sizing:border-box以使宽度+填充不大于预期宽度，也可以帮助正确确定这些类型的框的大小。 width:66%: padding:1rem表示框大小实际为2rem + 66％。因此，如果保证金为33％，则会产生抵消。

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