为什么 Internet Explorer 会拉伸图像？答案

【问题标题】：Why is Internet Explorer stretching the image?为什么 Internet Explorer 会拉伸图像？
【发布时间】：2015-11-09 09:59:48
【问题描述】：

我有一个带有以下文本的 HTML 文件。

<div id="id1" style="max-height: 100px; min-width: 100px;">
    <div align ="center" id="id3">
        <div id="id2" style="height: 100px; max-width: 364px;">        
            <img src="http://www.file-extensions.org/imgs/articles/4/369/windows-10.png" height=100%; width=100%; />        
        </div>       
    </div>
</div>

当我在 Firefox、chrome 或 IE 9 或更高版本中打开它时，它会按预期显示。但是当我在 IE8 或更低版本中打开它时，它会完全拉伸到屏幕的宽度。如果我删除 width=100% 那么它工作正常。

两个问题：

为什么它在最新的 Firefox、chrome 版本和 IE 9 或更高版本中可以正常工作？这是 IE8 中的已知错误/问题吗？如果是，那是什么？
如何在不更改 HTML 本身的情况下修复它在 IE8 浏览器中的显示，即我无法删除 width=100% 属性。

【问题讨论】：

仅供参考：没有float:center这样的东西
好的，谢谢，让我删除它并尝试。
你能简化你的 HTML 标记吗？
我删除了它仍然无法使用。
实际上，您希望图像如何显示？

标签： html css internet-explorer

【解决方案1】：

这是一个基于上述 cmets 的简化解决方案

div {
    min-width: 100px;
    display:block;
    margin:auto;
    max-width:364px;
}
img {
    height:auto;
    width:100%;
    display:block /*fix inline img gap*/
}

<div id="id1">
    <img src="http://www.file-extensions.org/imgs/articles/4/369/windows-10.png" />
</div>

【讨论】：