0

Com o exemplo abaixo calculamos o aspect ratio de uma imagem setando o Width/Height manualmente, com isso o valor do aspect ratio é gerado para ser posto no padding-bottom:

O que eu gostaria é algo semelhante: Quero pegar o valor widht/height de uma imagem, calcular o valor do ratio, e coloca-lo no container dela, tudo automaticamente. Serão várias imagens com dimensões diversas.

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

O valor gerado ficaria em um padding-bottom na div image-container

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

Por alguma razão não conseguir colocar o exemplo aqui no Stack.

3
  • Link que pode te interessar css-tricks.com/aspect-ratio-boxes
    – hugocsl
    8/03/2018 às 17:17
  • Aspect Ratio nesse caso seria para tornar a imagem proporcional (relativa a altura)? Por exemplo, uma imagem com 320wx240h e se redimensionar ela pela altura 640 automaticamente a largura vai ficar com 480?
    – RpgBoss
    8/03/2018 às 18:23
  • @RpgBoss Não sei dizer. Esse Aspect Ratio generator resolve o problema que eu estava tendo com lazysizes. O ratio é calculado com base no Width/Height, gerando um valor para ser colocado no padding-bottom, e isso funciona muito bem. Só que terei várias imagens com dimensões diferentes e não quero ter que setar manualmente o ratio delas. Mas fazer automaticamente como está descrito na pergunta. Só isso. 8/03/2018 às 19:17

1 Resposta 1

1

Pode percorrer todas as imagens nas <div class="image-container">, calcular a proporção e converter em %. Basta dividir o que for menor pelo maior (o width ou o height) e multiplicar por 100. Se forem do mesmo tamanho, o resultado será 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>

3
  • Uma coisa que esqueci: antes da imagem tem um link: <div class="image-container"><a href="#"> <img src="minhaimagen.jpg" width="100" height="50"> </a> </div> 8/03/2018 às 22:03
  • Eu removi o link só para testar, e está funcionando bem. Mas o valor com padding-bottom está sendo colocado no a e não no image-container. 8/03/2018 às 22:06
  • Atualizei a resposta.
    – Sam
    8/03/2018 às 22:08

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .