HTML image naturalWidth用法及代码示例

naturalWidth：属性用于获取图像的原始宽度。由于可以使用<img>标签的'width'属性来修改要在网页上显示的图像的宽度，因此naturalWidth属性在需要图像原始宽度而不是自定义宽度的情况下变得很有用。这是一个只读属性。

用法:

imageObject.naturalWidth

返回值：它以像素为单位返回图像的原始宽度。

例：

<html> 
  
<body> 
    <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20190602171808/629-300x255.png" 
id="image" alt="" width="250" height="205" 
class="alignnone size-medium wp-image-1092360" /> 
    <br> 
    <br> 
    <button type="button" onclick="getWidth()">Click</button> 
    <div id="text"></div> 
    <script> 
        function getWidth() { 
            var imgObject = document.getElementById("image"); 
            var output = document.getElementById("text"); 
            output.innerHTML = "Width of image:" + imgObject.width +  
            "<br>naturalWidth of image:" + imgObject.naturalWidth; 
        } 
    </script> 
</body> 
  
</html>

输出：
点击之前：

单击后：

支持的浏览器：

谷歌浏览器
Internet Explorer 9.0或以上
Mozila Firefox
Safari
Opera

相关用法

注：本文由纯净天空筛选整理自BhavyadeepPurswani大神的英文原创作品 HTML | DOM image naturalWidth property。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。