Get img size inside a list

Question

I'm having problems getting an image size inside a list, using jQuery. I'm having no problem to get the li element sizes, but every time I try with the image, it returns 0. What should I do?

<ul class="company-list">
    <li>
        <img src="<?php echo APP_URL; ?>images/partnership/img_01.jpg" alt="" >                         
    </li> 
</ul>


$( "ul.company-list li img" ).each(function( index ) {
        var imgHeight = $(this).height();
        var imgWidth = $(this).width();

        var imProp = imgWidth / imgHeight;
      console.log(imgHeight);
    });

maybe this link can be a reference https://stackoverflow.com/questions/623172/how-to-get-image-size-height-width-using-javascript — sikurro, Aug 10 '21 at 03:26

Alireza Ahmadi · Answer 1 · 2021-08-10T03:52:16.983

That happened because you are trying get width and height of image before loading. You must be sure first the picture is loaded and then get the width and height:

look at this snippet to understand. First the imgHeight is zero but after click button (I am sure the picture loaded) imgHeight has value:

showWidth();
 function showWidth() {
     $("ul.company-list li img").each(function (index) {
         var imgHeight = $(this).height();
         var imgWidth = $(this).width();

         var imProp = imgWidth / imgHeight;
         console.log(imgHeight);
     });
 }

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<button onclick="showWidth()">click to show width</button>
    <ul class="company-list">
        <li>
            <img src="https://i.stack.imgur.com/Lpy7M.jpg?s=420&g=1" alt="">
        </li>
</ul>

So you can use load event to make sure after loading the picture, you get the imgHeight:

$("ul.company-list li img").each(function (index) {
    $(this).on('load', function () {
        var imgHeight = $(this).height();
        var imgWidth = $(this).width();
        var imProp = imgWidth / imgHeight;
        console.log(imgHeight);
    })
});

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<ul class="company-list">
    <li>
        <img src="https://i.stack.imgur.com/Lpy7M.jpg?s=420&g=1" alt="">
    </li>
</ul>

score 1 · Accepted Answer · answered Aug 10 '21 at 03:43

maybe something like this [demo : https://jsfiddle.net/kn74f95a/2/]

$(document).ready(function(){

  $( "ul.company-list li" ).each(function() {
    let image = $(this).find('img').on('load', function(){
        let imgHeight = this.naturalHeight;
        let imgWidth = this.naturalWidth;

      let imProp = imgWidth / imgHeight;
      console.log(imgWidth, imgHeight);
    });    
  });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<ul class="company-list">
    <li>
        <img src="https://picsum.photos/480/320" alt="" >                         
    </li> 
    <li>
        <img src="https://picsum.photos/480/360" alt="" >                         
    </li> 
</ul>

Get img size inside a list

2 Answers2