naturalWidth 与 naturalHeight

最新推荐文章于 2024-04-22 17:12:32 发布

绿叶葱花

最新推荐文章于 2024-04-22 17:12:32 发布

阅读量577

点赞数

本文链接：https://blog.youkuaiyun.com/Wnnu_N1/article/details/81299306

版权

在HTML 5中，新增加了两个用来判断图片的宽度和高度的属性(图片原始大小)，分别为
naturalWidth 和naturalHeight属性，例子如下：

注意问题：
- 图片没有加载的时候值为0，0
- 与img 设置的width 和height 无关，是图片的原始大小

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../base/jquery.js"></script>
</head>
<body>
<img width="200" height="125"
     src="//www.baidu.com/img/baidu.gif"
     id="abc">

<script>
    $(function () {
        $("#abc").on("load", function () {
         //jquery写法
            var imgW = $("#abc")[0].naturalWidth;
            var imgH = $("#abc")[0].naturalHeight;

        //javascript写法
            var imgW = myimage.naturalWidth; 
            var imgH = myimage.naturalHeight; 


            alert("原始大小:宽：" + imgW + "高：" + imgH);

  
            var imgWidth = $("#abc")[0].width;
            var imgHeight = $("#abc")[0].height;

            alert("显示: 宽：" + imgWidth + "高：" + imgHeight);


        })
    })
</script>
</body>
</html>