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" />

以上代码似乎适用于我测试过的除Safari以外的所有浏览器（除非您刷新页面，否则不会显示图像）。

我知道我可以使用CSS max-width，但这不适用于IE＆lt; 7是一个展示塞。

如何让所有浏览器都能正常运行？非常感谢提前。

Answer 1

我从未见过工作中的徒步旅行，但您可以尝试将onload事件更改为：

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

如果没有返回值，safari会认为不应该加载此对象。

Answer 2

使用IE6 css + javascript hack：

.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类，并以编程方式更改它们。

HTML + Javascript：动态图像调整大小？

4 个答案: