SoFunction
Updated on 2025-02-28

Seven ways to get the original size height and width of img image

Method 1:

Get it through the style attribute of the img object. If the style is not set, it will return empty

<img class="image"
         style="width: 100px; height: 200px;"
         src="/image_search/src=http%3A%2F%2Fimg9.%2Fpic%2F2019-091307%&refer=http%3A%2F%2Fimg9.&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655389703&t=4423dd371c66b6064a1ed3c4dc5e05cd">

<script>
    let image = ('.image');
    (); // 100px
    (); // 200px
</script>

Method 2: width/height

Directly obtain the value of img width/height. If no attribute is set, it will return 0.

 <style>
     .image {
         width: 200px;
         height: 100px;   
     }
 </style>

<img class="image"
     src="/image_search/src=http%3A%2F%2Fimg9.%2Fpic%2F2019-091307%&refer=http%3A%2F%2Fimg9.&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655389703&t=4423dd371c66b6064a1ed3c4dc5e05cd"
     alt="">

<script>
    let image = ('.image');
    (, );
    // 200 100
</script>

If the DOM image is fully loaded, you can get the size of the image element in the console

('.image').height
// 1200

Wait for the dom to complete loading to get the size of the img element

&lt;img class="image"
         src="/image_search/src=http%3A%2F%2Fimg9.%2Fpic%2F2019-091307%&amp;refer=http%3A%2F%2Fimg9.&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=auto?sec=1655389703&amp;t=4423dd371c66b6064a1ed3c4dc5e05cd"
         alt=""&gt;

&lt;script&gt;
     // Trigger when the external resources are loaded     ('load', function () {
         ('load');
         let image = ('.image')
         (, );
         // 1920 1200
     })

     // The DOM structure of the page has been drawn, and the external resources (with src attribute) have not been loaded yet     ('DOMContentLoaded', function () {
         ('DOMContentLoaded');
         let image = ('.image')
         (, );
         // 0 0
     })

 &lt;/script&gt;

Method 3: offsetWidth/clientWidth

Get it through offset(offsetWidth/offsetHeight) and client(clientWidth/clientHeight)

<style>
    .image {
        width: 200px;
        height: 100px;
        padding: 20px;
        border: 2px solid green;
    }
</style>

<img class="image"
     src="/image_search/src=http%3A%2F%2Fimg9.%2Fpic%2F2019-091307%&refer=http%3A%2F%2Fimg9.&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655389703&t=4423dd371c66b6064a1ed3c4dc5e05cd"
     alt="">

<script>
    let image = ('.image');
    // offset = width + padding  + border
    (, );
    // 244 144

    // client = width + padding
    (, );
    // 240 140

</script>

Method 4: getComputedStyle and currentStyle

Get it via getComputedStyle and currentStyle

&lt;style&gt;
    .image {
        width: 200px;
        height: 100px;
    }
&lt;/style&gt;

&lt;img class="image"
    src="/image_search/src=http%3A%2F%2Fimg9.%2Fpic%2F2019-091307%&amp;refer=http%3A%2F%2Fimg9.&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=auto?sec=1655389703&amp;t=4423dd371c66b6064a1ed3c4dc5e05cd"
     alt=""&gt;

&lt;script&gt;
    function getStyle(el, name) {
        if () {
            // Suitable for Firefox/IE9/Safari/Chrome/Opera browser            return (el, null)[name];
        } else {
            // Suitable for IE6/7/8            return [name];
        }
    }

    let image = ('.image');

    (getStyle(image, 'width'), getStyle(image, 'height'));
    // 200px 100px
&lt;/script&gt;

Method 5: Image object

Get image size asynchronously through Image object

let url =
    '/image_search/src=http%3A%2F%2Fimg9.%2Fpic%2F2019-091307%&refer=http%3A%2F%2Fimg9.&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655389703&t=4423dd371c66b6064a1ed3c4dc5e05cd';

function getImageSize(url) {
    return new Promise(function (resolve, reject) {
        let image = new Image();
         = function () {
            resolve({
                width: ,
                height: 
            });
        };
         = function () {
            reject(new Error('error'));
        };
         = url;
    });
}

(async () => {
    let size = await getImageSize(url);
    (size);
})();
// {width: 1920, height: 1200}

Method 6: naturalWidth

Get it through HTML5 attribute natural (naturalWidth, naturalHeight)

&lt;style&gt;
    .image {
        width: 200px;
        height: 100px;
    }
&lt;/style&gt;

&lt;img class="image"
     src="/image_search/src=http%3A%2F%2Fimg9.%2Fpic%2F2019-091307%&amp;refer=http%3A%2F%2Fimg9.&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=auto?sec=1655389703&amp;t=4423dd371c66b6064a1ed3c4dc5e05cd"
     alt=""&gt;

&lt;script&gt;
    // Suitable for Firefox/IE9/Safari/Chrome/Opera browser    let image = ('.image');
    (, );
    // 1920 1200
    
&lt;/script&gt;

Although the display width and height of the picture are set, the real size of the picture is obtained

Method 7: Compatible writing method

&lt;img class="image"
         src="/image_search/src=http%3A%2F%2Fimg9.%2Fpic%2F2019-091307%&amp;refer=http%3A%2F%2Fimg9.&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=auto?sec=1655389703&amp;t=4423dd371c66b6064a1ed3c4dc5e05cd"
         alt=""&gt;

&lt;script&gt;
    function getImageSizeByUrl(url) {
        return new Promise(function (resolve, reject) {
            let image = new Image();
             = function () {
                resolve({
                    width: ,
                    height: 
                });
            };
             = function () {
                reject(new Error('error'));
            };
             = url;
        });
    }

    async function getImageSize(img) {

        if () {
            // Suitable for Firefox/IE9/Safari/Chrome/Opera browser            ('naturalWidth');
            return {
                width: ,
                height: 
            }
        } else {
            ('getImageSizeByUrl');
            return await getImageSizeByUrl();
        }
    }

    (async () =&gt; {
        let image = ('.image');
        let size = await getImageSize(image);
        (size);
    })();
    // {width: 1920, height: 1200}
&lt;/script&gt;

Summarize

Way illustrate
If you don't set style, you won't get width
width/height Get rendering size
offsetWidth/clientWidth Get rendering size
getComputedStyle and currentStyle Get rendering size
Image object Get the real size
naturalWidth Get the real size

refer to

  • JS get IMG image height and width
  • (JS related to image loading issues) dom loading and onload events

Summarize

This is the article about seven ways to obtain the original size height and width of img images by JS. This is the end. For more related content on obtaining the original size of img images by JS. Please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!