HTML +的Javascript：动态图像调整？

Question

我试图得到一些JavaScript以编程方式调整HTML img标签的宽度，以正确显示各种大小的图像。

我在img一个固定的宽度800px标签以显示图像，这是最大的宽度。

如果该图像是较宽然后800px我想在800px宽，以显示它;

如果该图像是小于800px宽欲保持其宽度，以避免将其拉伸。

我使用此HTML / javacript代码来获得的部分解决方案：

function resize_image(id) {
	var img = document.getElementById(id);
	var normal_width = img.width;
	img.removeAttribute("width");
	var real_width = img.width;
	if (real_width < normal_width) {
		img.width = real_width;
	} else {
		img.width = normal_width;
	}
}

<img id="myimage" onload="resize_image(self.id);" src="https://via.placeholder.com/350x150" width="800" />

Answer 1

我从来没有见过在工作中Safari浏览器，但你可以尝试改变你的onload事件这样的：

onload="resize_image(self.id);return true"

这可能是因为没有返回值，野生认为该对象不应该被加载。

Answer 2

使用IE6 CSS + JavaScript的劈：

.dynamic_img {
    width: expression(document.body.clientWidth <= 800? "auto" : "800px");
    max-width: 800px; //For normal browsers
}

Answer 3

如果没有ID：

...
  function resize_image( img )
  {
     //var img = document.getElementById( id );
...
  <img onload="resize_image(this);" src="IMAGE.JPG" width="800" />

Answer 4

您是否尝试过与img.style.width猴子？您也可以尝试为每个的2个条件2 CSS类和programmaticly改变它们。