4

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

我有一个固定宽度的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 ，但这在< 7 上max-width不起作用，这是一个阻碍。IE

我怎样才能让它适用于所有浏览器？提前谢谢了。

4

4 回答 4

3

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

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

可能是没有返回值，safari 认为不应该加载这个对象。

于 2008-12-16T14:56:30.517 回答
2

使用 IE6 css+javascript hack：

.dynamic_img {
    width: expression(document.body.clientWidth <= 800? "auto" : "800px");
    max-width: 800px; //For normal browsers
}
于 2008-12-16T14:37:21.023 回答
1

没有身份证：

...
  function resize_image( img )
  {
     //var img = document.getElementById( id );
...
  <img onload="resize_image(this);" src="IMAGE.JPG" width="800" />
于 2010-03-04T15:23:34.867 回答
0

你试过猴子img.style.width吗？您还可以尝试为 2 个条件中的每一个设置 2 个 CSS 类并以编程方式更改它们。

于 2008-12-16T14:38:34.483 回答