CSS crop image code – Create pure CSS photo cropper in WordPress

There are many situations when you need to perfectly fit images with various aspect ratios into a container with predefined dimensions and aspect ratio. The best practice in those cases is to create a image cropper that will optimally fit the image inside the predefined container and crop the sides that overflow. To create the cropper we suggest using the CSS crop image code described in this tutorial.

When do we need to crop images on web sites?

The most common situation when a CSS image cropper comes handy in WordPress is when we use featured images with various aspect ratios in our posts. When we display those posts in grid feeds such as category archives, featured images with different image sizes and proportions will most likely cause the grid to break. In other cases they will cause the design geometry to look awkward.

Featured images with various aspect ratios might also corrupt the appearance of your single posts or other parts of the website where the featured image is displayed, if the design requires a predefined aspect ratio image.

The solution to this problem is to create a photo cropper using simple CSS crop image code. This code will crop any image to our desired aspect ratio.

Speaking of WordPress, some themes have featured image crop function already integrated, some don’t. If your theme doesn’t crop featured images automatically or you are building a theme from scratch, with this tutorial it won’t be a tough job adding it.

The first row shows the post loop grid with featured images of various aspect ratios without croping them to a fixed aspect ratio. In the second row you can see the very same images cropped to the desired proportions using CSS only.

How does CSS crop image code work?

There are a couple of methods to create a CSS photo cropper, such as:

• the background image method
• the object fit method
• the image container method

Since in most cases we’ll have an image object inside our HTML document, we won’t use the background image method in this tutorial.

In the object fit method we set fixed dimensions to the image and use the object-fit CSS property to fit any image to the predefined dimensions. The parts of the image that overflow the predefined dimensions will won’t be visible, as they would be cropped.

The the image container method consists of adding a parent div with predefined aspect ratio to the image and use it as photo cropper. A simple CSS crop image code will fit and center the image inside the parent div and crop the overflowing parts.

Cropping an image using the CSS object fit method

The object fit method is a very simple way of cropping the image to the desired aspect ratio using CSS code only. For example, lets say we want to have all the images inside our WordPress archive post loop in same proportions (dimensions).

Firstly, we have to figure out how to target the the all the post loop images in CSS. In most themes, the featured image inside the post loop has a class name such as attachment-post-thumbnail or wp-post-image. Using the browser’s property inspector you can easily find out which class is added to your post loop featured image. If you’re building your post loop from scratch use your own class for the image.

Secondly, we have to define the proportions (aspect ratio) of the post loop featured image by defining it’s CSS width and height. Finally, by adding the object-fit: cover; CSS property to the image, we’ll make the featured image of any dimensions and proportions fit the predefined width and height. Our CSS crop image code in this case should look similar to this:

.wp-post-image  {
  width: 320px;
  height: 200px;
  object-fit:cover;
}

Adjust the values of the CSS properties above according to your needs. To make your post loop images responsive we suggest using percents to define width property value. You can also define the height property value in vw or vh units. Don’t forget to adjust those values in your responsive style sheet for mobile phones. Here’s an example of the same CSS crop image code above but using responsive units:

.wp-post-image  {
  width: 100%;
  height: 25vh;
  object-fit:cover;
}

Cropping an image using the CSS image container method

The image container method is another commonly used way of creating a CSS photo cropper. Like in the previous example, we’ll make all our WordPress post loop featured images the exact same size and proportions, regardless the aspect ratio of each post’s featured image.

Firstly we have to wrap the post loop image inside a <div> container. In most WordPress themes the post image is already wrapped inside a container which usually has a class name post-thumbnail, post-thumb or something similar. Using your browser’s property inspector, find out the post image container class name so you can target it with CSS. If your theme’s post loop image is not wrapped with a container element by default, you can edit the theme file which generates the post loop and add the parent container manually. In case you’re building your post loop from scratch, wrap your post loop image inside a parent container and add a class name of your choice to the container.

Pro Tip: If your theme doesn’t have the post loop image wrapped with a container element and you’re not experienced enough to edit WordPress template files, you can still use the object fit method CSS crop image code described earlier. That way you won’t need the parent container element because the CSS crop image code is applied directly on the image.

Now we have to set the dimensions and aspect ratio of the image container element using width and height CSS properties. We’ll also hide all overflowing parts of the image inside the container using the overflow property. Finally, we’ll apply a couple of CSS properties to the image inside the container to center it and fill all available container space.

The CSS crop image code using the image container method should look like this:

.post-thumb {
    position: relative;
    width: 200px;
    height: 200px;
    overflow: hidden;
}

.post-thumb img {
    position: absolute;
    margin: auto;
    min-height: 100%;
    min-width: 100%;
    left: -100%;
    right: -100%;
    top: -100%;
    bottom: -100%;
}

Adjust the width and height in the CSS crop image code according to your needs, and don’t forget to change the class name post-thumb according to your themes featured image parent container class name. Same as in the object fit method example, you can use percents to define width property value and vw or vh units to define the height. That way you can make your post loop image grid responsive.

Which method should you use to create the photo cropper?

You’re probably wondering should you use theimage container method or the object fit method to create your image cropper. There’s no right or wrong choice since both methods will generate the same result. The choice depends of each specific situation, so you should chose the method you find easier and more practical to implement in your specific case. If you’re editing a theme the choice will mostly depend of the predefined code structure. In the other hand, if you’re building your website from scratch it’s completely up to you to decide which CSS crop image code will suit you the best.