A common problem facing website designers is that images supplied by clients aren’t uniform.

In the past, I would edit them all in Photoshop to make them uniform. Then I discovered this trick, which forces all of the images to the same aspect ratio and (as long as the widths of the image modules are the same) to the same size.

Here is an example of a random group of images.

Before: Images of Various Sizes

After: Images of Uniform Sizes

Landscape

Here I have forced them to landscape mode (16:9 ratio).

Portrait

Here I have forced them to portrait mode (16:9 ratio).

How to Force Aspect Ratio

To make this work all you have to do is:

1. Assign the appropriate class (portrait or landscape) to the image modules’ CSS Class field.
2. Add the CSS code below to your website.

.landscape .et_pb_image_wrap {
  padding-top: 56.25%;
  display: block;
 }
 .portrait .et_pb_image_wrap {
  padding-top: 177.78%;
  display: block;
 }
.landscape .et_pb_image_wrap img, 
.portrait .et_pb_image_wrap img {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  object-fit: cover;
 }

The code here forces the aspect ratio to be 16:9. Other aspect ratios are available. See this article for details.