0

So I am pulling in post thumbnails using a WP query / loop. I have various different loops but I always want the aspect ratio to be 4/3, i.e. the height is always 75% of the width.

Now setting it in px would be rather easy, but since the width of the thumbnail changes a lot, I am looking to apply a universal class to all the thumbnails.

The thumbnail part of the loop looks like this. I thought this would work with calc (width * 0.75). That doesnt work, as I assume the width would have to be set in pixels for that to function?

Another option I explored was add_image_size as a function and then call in the_post_thumbnail, but that would mean I would have to use pixels.

Any ideas?

.category-thumbnail-header {
    width: 100%;
    object-fit: cover;
}
<?php if ( has_post_thumbnail() ) { ?>
   <a href="<?php the_permalink(); ?>" >
   
    <?php the_post_thumbnail( 'large', array(
     'class' => 'category-thumbnail-header',
     'alt' => get_the_title()
     ) );
    ?>
   
   </a>
  
  <?php }?>

<a href="https://smartinvestor.local/2020/02/18/aktien-update-agnico-eagle-mines/" >
                
<img 
width="1024" height="1024" 
src="https://smartinvestor.local/wp-content/uploads/2020/02/curioso-photography-pqN82ZS6OsI-unsplash-1024x1024.jpg" 
class="category-thumbnial-header wp-post-image" 
alt="Aktien-Update: Agnico Eagle Mines" 
srcset="" 
sizes="(max-width: 1024px) 100vw, 1024px" />                
</a>
Khufu
  • 55
  • 7
  • Is the aspect ratio correct in the original image? If so, then you can set height as auto and it will still be the correct ratio. Can you alter your code to show the generated html? – Richard Parnaby-King May 13 '20 at 08:50
  • No the aspect ratio is not and since the images are uploaded by various different authors and come from a variety of different sources they vary widely in aspect ratio. Maybe I should apply a filter server side that resizes all images to the correct aspect ratio? I assume that would be better than resizing all images with css, which will likely slowdown the site. – Khufu May 13 '20 at 09:02
  • @RichardParnaby-King I have added the html output, though deleted the srcset, as it was too long. – Khufu May 13 '20 at 09:54
  • *I have various different loops but I always want the width/height ratio to be 12/9, i.e. the height is always 75% of the width.* Of what width? Containing block's width? – Richard May 13 '20 at 09:59
  • Yes of the containing block, but at the moment the containing block varies in height as it depends how large the image is. Maybe set the containing block height as 75% of width and then use object-fit? – Khufu May 13 '20 at 10:48

1 Answers1

0

I do it like this:

.wrapper{
  width:200px
}

.wrapper-2{
  width:300px
}

.wrapper-3{
  width:600px
}

.ratio-4by3,
.ratio-3by2,
.ratio-1by1{
  position:relative;
}

.ratio-4by3:before{
  content: '';
  display: block;
  padding-top: 75%;
}

.ratio-3by2:before {
  content: '';
  display: block;
  padding-top: 66.666%;
}

.ratio-1by1:before {
  content: '';
  display: block;
  padding-top: 100%;
}

img{
  position:absolute;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
<div class="wrapper">
  <div class="ratio-4by3"><img src="https://placekitten.com/1920/1080" /></div><br />
  <div class="ratio-3by2"><img src="https://placekitten.com/1920/1080" /></div><br />
  <div class="ratio-1by1"><img src="https://placekitten.com/1920/1080" /></div><br />
</div>

<div class="wrapper-2">
  <div class="ratio-4by3"><img src="https://placekitten.com/1920/1080" /></div><br />
  <div class="ratio-3by2"><img src="https://placekitten.com/1920/1080" /></div><br />
  <div class="ratio-1by1"><img src="https://placekitten.com/1920/1080" /></div><br />
</div>

<div class="wrapper-3">
  <div class="ratio-4by3"><img src="https://placekitten.com/1920/1080" /></div><br />
  <div class="ratio-3by2"><img src="https://placekitten.com/1920/1080" /></div><br />
  <div class="ratio-1by1"><img src="https://placekitten.com/1920/1080" /></div><br />
</div>
davidgiesemann
  • 941
  • 6
  • 16