HTML +的Javascript:动态图像调整?
-
21-08-2019 - |
题
我试图得到一些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
<7,其不会工作这是一个显示塞。
我怎样才能得到这个工作对于所有浏览器?提前非常感谢。
解决方案
我从来没有见过在工作中Safari浏览器,但你可以尝试改变你的onload事件这样的:
onload="resize_image(self.id);return true"
这可能是因为没有返回值,野生认为该对象不应该被加载。
其他提示
使用IE6 CSS + JavaScript的劈:
.dynamic_img {
width: expression(document.body.clientWidth <= 800? "auto" : "800px");
max-width: 800px; //For normal browsers
}
如果没有ID:
...
function resize_image( img )
{
//var img = document.getElementById( id );
...
<img onload="resize_image(this);" src="IMAGE.JPG" width="800" />
您是否尝试过与img.style.width
猴子?您也可以尝试为每个的2个条件2 CSS类和programmaticly改变它们。
不隶属于 StackOverflow