How to Adjust Aspect Ratio for Image Class in WordPress

by Rian

If you are posting regularly on WordPress-run websites, you are most likely also posting an image as visual aid —best way to describe what the post is without a single word. And as I had discussed it in an op-ed, aspect ratio is a thing for modern readers, and images will play a major role in how much space of that screen will be used.

Straight to the point, if you have “featured images”, or “related images” in the same place, in every post, these images are likely bundled as the same “class” in CSS. If you are unsure what class the images fall under, you can use your favorite browser’s developer tools to identify style attributes. Class name is preceded by a period. For example, on Mad Tea Party, featured images have .selected-images class.

Once you have narrowed down the class, using the theme editor on WordPress, edit the stylesheet for aspect ratio and how images will be handled if it isn’t already in that aspect ratio. Below is the example I used for mine:

.[CLASS] {
  object-fit: cover;
  aspect-ratio: 16/9;
}

object-fit defines how the image will be handled. With “cover” option, it works like letterboxing; the image will fill the box and any spill overs won’t be shown. The original image isn’t edited, so the reader can still access it. aspect-ratio is literally what it is. You might be interested in different ratios, depending on how you are building the website.

Once again, I want to emphasize CSS is a powerful tool. I only wish I had known about aspect-ratio before I started writing broken PHP codes to do something similar.