Javascript图像在IE中表现不同

在IE 11中，图像缩放不正确，因为IE似乎设置了动态创建图像的宽度和高度属性，而Firefox/Chrome没有

$（函数（）{
var image=新图像（）；
image.src=”http://placehold.it/350x1200";
$（“div”）。追加（$（图像））；
})

div{
宽度：100px；
最大高度：100px；
}
img{
最大宽度：100%；
最大高度：继承；
}

更改

img {
  max-width: 100%;
  max-height: inherit;
}

到

要停止子元素溢出或调整父div高度的大小，请添加溢出：隐藏；规则设置为div。否则，图像将以不同于其自然值的纵横比渲染，看起来会很奇怪

因为它看起来像IE设置了动态创建的图像的宽度和高度属性

嗯，我不会这样说的。我更愿意说，试图通过使用

$（Image）

将JS

图像

元素“生成”为可追加的HTML代码似乎会产生这种意想不到的结果，但在我看来，这种代码一开始就“奇怪”

一旦你用一个简单的

$("div").append('<img src="http://placehold.it/350x1200">');

$（“div”）。追加（“”）；

---

IE 11显示的图像与其他浏览器相同。

最大宽度样式规则使用绝对单位，而不是相对值。要将子内联块元素调整为其父块元素的大小，请使用style=“width:100%”Related：很遗憾，我需要限制高度。在Firefox/Chrome（29x100）中，纵横比也是正确的。只有在IE中，它才会变成100x100的正方形。JS图像应该是一个

HTMLImageElement

（但在IE中似乎不是这样）。我之所以使用图像构造函数，是因为生成的图像对象可以在设置

src

之前轻松设置

onload

，但在您的解决方案中也应该可以这样做。我认为，当您将HTMLImageElement传递给$（）时，它会转换为字符串，因此会调用它的隐式到字符串转换方法。我不确定是否在任何地方指定了该属性，因此IE和其他浏览器可能只是在这里不同意在生成的HTML字符串中包含宽度和高度属性是否有意义但是您是正确的，这不应该阻止您继续使用

new Image（）

来预先连接负载处理程序；您可以简单地将两者结合起来。

$("div").append('<img src="http://placehold.it/350x1200">');