Scale Up and Crop an Image WordPress [code snippet]

In WordPress you may need to increase the size of all thumbnails but WordPress does not res up the images to prevent distortion. Using the method outlined in this example you can use object-fit to make undersized images fit your desired aspect ratio. .img-crop__polyfill image is sized to the desired dimensions. This will help keep the aspect ratio the same for undersized images.

Table of Contents

HTML

CSS

.instructions {
background: #fff;
padding: 2rem;
margin-bottom: 1rem;
}

.img-crop {
border: 1px solid #e2e2e2;
position: relative;
overflow: hidden;
}
.img-crop__polyfill {
max-width: 100%;
height: auto;
opacity: 0;
}
.img-crop__objectfit {
object-fit: cover;
width: 100%;
position: absolute;
top: 0;
}