Using CSS to display all images the same size

To force a browser to display thumbnails or images at a specific size in WordPress, you can use the following CSS to control the size of the images. In the example below, the Featured Image needs to display at 1000px x 345px. Without this code in place, I was having some display issues in Chrome where it was resizing smaller images 580px x 200px (the same proportionally as 1000px x 345px), but it was causing the layout to break.

With this code, the smaller images are displayed correctly. I had to use this method as the Regenerate Thumbnails plugin in WordPress is unable to make images larger than their original size.

It’s never ideal to scale up smaller images, but the alternative was to manually resize over a thousand thumbnails!

The magic comes from using width, height, and object-fit properties!

#featuredImage {
    width: 100%;                     /* full container width */
    max-width: 1000px;               /* max width */
    aspect-ratio: 1000 / 345;        /* maintain 1000x345 ratio */
    overflow: hidden;
}

#featuredImage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}