Calculate Auto Aspect Ratio Automatically

Question

With the example below we calculate the Aspect ratio of an image by setting Width/Height manually, with this the value of the Aspect ratio is generated to be put in the padding-bottom:

What I would like is something similar: I want to take the widht/height value of an image, calculate the ratio value, and put it in its container, all automatically. There will be several images with different dimensions.

<div class="image-container">
    <img src="minhaimagen.jpg" width="300" height="200">
</div>

The generated value would be in a padding-bottom in the div image-container

Example: https://codepen.io/EightArmsHQ/full/OMGOyE/

For some reason you can’t put the example here in Stack.

Answer 1

You can browse all images on <div class="image-container">, calculate the ratio and convert to %. Simply divide the smallest by the largest (the width or the height) and multiply by 100. If they are the same size, the result will be 100%.

window.onload = function(){
   
   var imgs = document.body.querySelectorAll(".image-container a img");
   
   for(var x=0; x<imgs.length; x++){
      
      var img_w = parseInt(imgs[x].getAttribute("width")),
          img_h = parseInt(imgs[x].getAttribute("height"));

          if(img_w == img_h){
             var img_p = 100;
          }else if(img_w > img_h){
             var img_p = (img_h/img_w) * 100;
          }else if(img_w < img_h){
             var img_p = (img_w/img_h) * 100;
          }
          
          imgs[x].parentNode.parentNode.style.paddingBottom = img_p.toFixed(2)+"%";
          console.log(img_p.toFixed(2)+"%");
   }
   
}

<div class="image-container">
    <a href="#">
       <img src="http://lorempixel.com/400/200" width="400" height="200">
    </a>
</div>

<div class="image-container">
    <a href="#">
       <img src="http://lorempixel.com/output/nature-q-c-300-200-1.jpg" width="300" height="200">
    </a>
</div>

<div class="image-container">
    <a href="#">
       <img src="http://lorempixel.com/output/technics-q-c-150-150-8.jpg" width="150" height="150">
    </a>
</div>

<div class="image-container">
    <a href="#">
       <img src="http://lorempixel.com/200/200/sports/" width="100" height="200">
    </a>
</div>

<div class="image-container">
    <a href="#">
       <img src="http://lorempixel.com/300/200/people/" width="300" height="200">
    </a>
</div>