IE 不支持 height=auto 图像，我应该使用什么？答案

【问题标题】：IE doesn't support height=auto for images, what should I use?IE 不支持 height=auto 图像，我应该使用什么？
【发布时间】：2012-01-30 04:42:03
【问题描述】：

我有一些 height=auto 的图像，因为有时它们的高度不同，而它们的宽度总是相同。它适用于除 I.E. 之外的所有浏览器，我可以使用类似的东西吗？

【问题讨论】：

height=auto 是做什么的？如果您不指定高度，它将使用图像的实际高度值。
它使图像在 IE 中的高度为 1。在其他浏览器中运行良好。

标签： css image cross-browser

【解决方案1】：

我发现添加min-height:1px 可以解决问题。不知道为什么，但是对我有用。

【讨论】：

除了省略之外，在 ie11 中的弹性容器中对我有用的唯一解决方案。谢谢。
交给 Michalsoft 强制用户这样做
从业 13 年，我仍然不知道为什么。
别难过，我刚刚让一个使用 IE 11 的客户说这个网站一团糟。我忘记了自己的答案。从业 24 年，我很高兴这些天浏览器变得更加统一。

【解决方案2】：

离开

height=auto

出来。如果没有给出它默认为“自动”...

【讨论】：

【解决方案3】：

解决方案是添加典型的 IE 修复 :(

css:

height:auto !important;

【讨论】：

必须添加特定的最大高度
IE 不知道最大高度。 IE 不允许以编程方式设置重要 element.style.height="auto !important" = 无效参数。

【解决方案4】：

我已经尝试了所有发布的解决方案，唯一有效的是

height=100%

【讨论】：

这可能会产生拉伸图像的意外后果。

【解决方案5】：

将 height: auto 与 width: auto 一起使用，它将在 IE 中工作。如果你只指定其中一个，IE 就会生气。

height: auto;
width: auto;

【讨论】：

只会选择后者。在这种情况下，导致宽度优先于高度。
这在 IE 中不起作用。 10.当我删除宽度：自动；并保持高度：自动；它再次开始显示该对象。否则图像不会同时出现在自动模式下。

【解决方案6】：

在 flex 容器中使用带有 height=auto 的图像时也会出现 IE 问题。

就我个人而言，这个问题是由于图像被放置在嵌套的弹性容器中造成的。我能够删除父 flex 容器并且问题已为我解决。

人们在下面的页面中提到了一些解决方案： https://github.com/philipwalton/flexbugs/issues/75

【讨论】：

【解决方案7】：

您可以使用width="100%" 和max-width="100px" 或任何您想要的宽度，然后只需使用height="auto"。这对我有用。

顺便说一句，如果您的父元素没有您想要的图像宽度，您可能还需要 min-width 宽度您想要的宽度。

【讨论】：

【解决方案8】：

对于 Edge 浏览器，您可以使用 max-height，这也适用于其他浏览器

max-height: 100%;

【讨论】：

【解决方案9】：

我遇到了同样的问题，并且修复了 min-height 和 !important 对我不起作用。我的 img 在 flex 容器中。然后我试着把 img 放在另一个里面，包装 div 然后 height:auto 工作。

【讨论】：

【解决方案10】：

在“IE9 兼容性视图 - IE7 标准文档模式”中离开 height=auto 可能无法解决问题。尝试添加条件 CSS 并在 IE 的特殊 css 文件（“ie.css”）中添加一行，为受影响的类/元素分配适当的最小高度。

例如：

.IE7 .[css 元素] {min-height: xxxpx;}

其中 xxx 等于必要的图像高度。

【讨论】：

假设页面顶部有其他代码...见impressivewebs.com/ie7-ie8-css-hacks

【解决方案11】：

高度：初始；将工作而不是使用 height: auto;在 chrome 和 ie 中。

【讨论】：