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

发布于 2024-07-10 14:33:59 字数 1061 浏览 5 评论 0原文

我正在尝试使用一些 JavaScript 以编程方式调整 HTML img 标签的宽度，以正确显示各种尺寸的图像。

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

如果图像更宽，则 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 上不起作用 7是一个表演终结者。

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

原文

I am trying to get some JavaScript to programmatically adjust a HTML img tag's width to display various sized images correctly.

I have a fixed width img tag at 800px to display an image, this is the max width.

If the image is wider then 800px I want to display it at 800px wide;

If the image is less than 800px wide I want to preserve its width to avoid stretching it.

I use this html/javacript code to get a partial solution:

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

The above code seems to work on all browsers I have tested except Safari (images don't display unless you refresh the page).

I know I can use CSS max-width but that wont work on IE < 7 which is a show stopper.

How can I get this working for all browsers? Many thanks in advance.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

小嗲 2024-07-17 14:33:59

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

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

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

I have never seen a safari in work, but you can try changing your onload event to this:

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

It could be that without a return value, safari thinks that this object should not be loaded.

回复收藏 0 原文

人│生佛魔见 2024-07-17 14:33:59

使用 IE6 css+javascript hack：

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

Use the IE6 css+javascript hack:

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

回复收藏 0 原文

倾城月光淡如水﹏ 2024-07-17 14:33:59

没有身份证：

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

Without id:

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

回复收藏 0 原文