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

Question

我正在尝试使用JavaScript编写程序来自动调整HTML的标签的宽度，以正确地显示各种尺寸的图像。

我有一个固定宽度为800像素的标签，用于显示图像，这是最大宽度。

如果图像宽度超过800像素，我希望将其显示为800像素宽；

如果图像宽度小于800像素，则保留其宽度，以避免拉伸。

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

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 < 7 是无法解决的问题。

有什么方法可以让这个功能在所有浏览器中都正常工作吗？非常感谢您的帮助。

- Steve

Answer 1

我从未见过在工作中使用safari，但您可以尝试将您的onload事件更改为以下内容：

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

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

- Max

Answer 2

使用IE6的css+javascript hack：

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

- Max

---

这会造成性能损耗，因此您不能在页面上有一堆它们。 - sblundy

嗯，我刚刚测试了一下，你猜怎么着，那个表达式会在任何可能的事件上被评估。我太天真了，以为它只会被评估一次... - bezmax

Answer 3

没有id：

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

- mroztn

Answer 4

你尝试过使用 img.style.width 来调整图片大小吗？你也可以尝试为每个条件设置两个 CSS 类，并通过编程方式更改它们。

- sblundy