html - 为什么 Internet Explorer 会拉伸(stretch)图像？

Question

我有一个包含以下文本的 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 或更低版本中打开它时，它会完全拉伸(stretch)到屏幕的宽度。如果我删除 width=100% 然后它工作正常。

两个问题:

• 为什么它在最新的 Firefox、chrome 版本和 IE 9 或更高版本中按预期工作？这是 IE8 中的已知错误/问题吗？如果是，那是什么？

• 如何在不更改 HTML 本身的情况下修复它在 IE8 浏览器中的显示，即我无法删除 width=100% 属性。

Answer 1

根据您上面的评论，这是一个简化的解决方案

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>