Force blog images to have the same height.

<article>
   <div class="image-wrapper">
      <img .................. >
   </div>
   <div class="bodytext">
       <p> ................. </p>
    </div>
</article>
.image-wrapper {
    position: relative;
    padding: 60% 0 0 0;
    overflow: hidden;
    height:0;
}
.image-wrapper img {
     position: absolute;
     width: 100%; 
     height: auto;
     top: 50%;
     left:50%;
     transform: translate(-50%, -50%);
}

Another easiest approach for modern browsers:

.image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 0 !important;
}
Scroll to Top