<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;
}