How to Crop Images in WordPress Using CSS?

Images play an important role in a website so people are likely to invest time and effort to have the best image display, and cropping images is one of the most frequently used manipulations to adjust images. It’s just a piece of cake if you crop and upload images normally. But if you want all of the images in the same class look similar in terms of size and style, it’s not that easy. It will take your time to change the images one-by-one and upload them. Therefore, today I will give you a quick and convenient method to crop images in the same class on your website using CSS in WordPress.

With this method, you just need to use some line of code, which sounds quite technical but really simple and easy to do, to crop and adjust the image display directly on your website.

Step 1: Inspect the Image that You Want to Crop

First, on your website, hover the mouse to the image you want to crop, then click the right mouse > Inspect. In this case, I will use CSS to crop all the post thumbnails on the blog page.

You will see the frame appear on the screen and the line of code has the name of the element that you inspect. On the right column, you can see the parameters of the images. The bold line is the name of the class of images that you will adjust. Pay attention to this area as we have to deal with it in the next steps.

Step 2: Try the Image Display that Suits Your Taste

Normally, there are three parameters that define how your images display: width, height, and image display style (image display style is how your images are stretched, zoomed or clipped to fit the container frame). If your images haven’t had these parameters, you have to add them. In the right column, add ‘width’, ‘height’ and the size you want next to them. Then, add ‘object-fit’ and choose one among the available styles for the image display.

You can try the different width, height, and style for the images until you find out which style satisfies you.

There are about 8 styles to display your image and you should choose it carefully to have the perfect fit. Each has the pros and cons depending on the container frame and the image’s ratio aspect.

I test all the styles and find some interesting things. For example, the Fill style and Cover style are quite similar to each other and will scale the images to fit with the frame, while the Scale-down style and Contain style make the images a bit quite small in size. Or you can use None style if you think it’s not necessary to change anything of your image.

Step 3: Add Additional CSS to Your Website

After choosing the new size and style, it’s time to crop images by CSS.

First, you need to copy the bold line that I highlighted in Step 1, and the 3 parameters that you chose.

Then, go to Customizer > Additional CSS and insert that code here and see the change with the live preview. Otherwise, you can type the code manually.

In my example, I need to insert this code

.blog-grid .entry-media img { 
    width: 500px;
    height: 300px;
    object-fit: cover;
}

If it’s still not okay, you can change the parameters again here. Finally, click Publish to save.

Just see how easy and convenient it is this tip make! Besides that, maybe you should pay more attention to image optimization to boost the performance of a WordPress site also. Now you can save a lot of time adjusting the image. Wish you have the best result and have a fun time dealing with images.