获取源图像中没有指定宽度和高度的图像尺寸

我想要获取未在HTML源代码中指定宽度和高度标签的图像的高度和宽度。获取源图像中没有指定宽度和高度的图像尺寸

即

<img src="http://www.mysite.com/imge.jpg" id="my_img" />

我想要做的就是图像的宽度和高度加载之前。我正试图完成以下任务，如果您知道更好的解决方案，请告诉我。

我想这样做，因为我想保留我的网站中的所有图像小于或等于600px。所以如果图片的宽度> 600px，我会将其降低到600px。否则，我保持其宽度不变。

我的选择：以下任何代码都不适用于此任务，因为它们在图像加载后获取图像大小;最初他们显示宽度为零。

<script type="text/javascript"> 
    var img = document.getElementById('my_img'); 
    var width = img.clientWidth; 
    var height = img.clientHeight; 
    alert('Width: ' + width + ' Height:' + height); // FAIL 

    var timg = document.getElementById('test').width; 
    alert(timg); // FAIL too 
</script>

我的HTML代码：

<img src="http://www.mysite.com/imge.jpg" id="my_img" />

希望这是显而易见的。

谢谢。

来源

2012-12-25 printfmyname

“我想要做的就是图像的宽度和高度加载之前。” - 好吧，如果可能的话，浏览器会为你做。你需要等待这些信息。 –

使用JQuery：$（'＃my_img'）。height（）和$（'＃my_img'）。width（）来检索图像大小。但在你的情况下，你需要使用CSS提出的@Giona – sdespont

@sdespont我认为这将工作后图像加载页面，对不对？ printfmyname，我想你可以在服务器端代码中做这个，比如java或php。 – Patriks

jsFiddle

为什么使用JavaScript？有了这个CSS规则，你可以在宽度限制600px：

#my_img { max-width:600px; }

来源

2012-12-25 07:58:18 Giona

** + 1 **优秀的答案！ – arttronics

这样的天才答案..感谢Giona和arttronics。其他人都花时间回答。 – printfmyname

感谢@arttronics设置小提琴！ – Giona

获取源图像中没有指定宽度和高度的图像尺寸

回答

相关问题