CSS Crop Image: The How To Techniques And Manual

If you use WordPress, you will notice how different posts require different aspect ratios, unlike some websites that use a Javascript File Upload API to upload images efficiently. The images in WordPress or any website will sometimes have strange geometry if the image is not cropped properly, especially if it’s a grid setting. Using CSS crop image codes, we will look at how to crop any image to its desired aspect ratio efficiently.

How Does Image Cropping Work In CSS?

Image cropping techniques involve taking out specific areas of the image and adjusting the size of the image.  It has the potential to bring interest to a certain area of an image by focusing on that area, eliminating unnecessary details, or repositioning the subject.

When dealing with images, you’ll probably get into a situation where you want to keep the initial aspect ratio. Images that are stretched or compressed will appear distorted if the aspect ratio is not maintained. The background image CSS property is a frequent fix for this issue by adjusting the background size of the image. However, there are modern methods to keep the initial aspect ratio. This includes CSS properties like width, height, overflow, object fit property, object position property, padding-top, CSS transforms, and the Clip_path() function.

Various Methodologies To Crop An Image Using CSS

Let’s look at the various methods to crop an image using CSS. I’ll list them from the most straightforward to the most complex.

Width, Height, And Overflow CSS Properties

This method uses the image width, height, and overflow properties of CSS. Width and height are very common and basic properties you might have encountered. These can also crop images.

Place the image inside an element with a predetermined width and height to allow the overflow attribute, and enable overflow to be hidden. This assures the container maintains its shape and that any other images it contains are concealed behind it. Utilize the margins parameter to specify the crop region. There are four values for this attribute, but you only need to enter the first and last two because they correspond to the top and left positions, respectively.

The below code demonstrates how to reduce a 300×300 pixel image to a square that is only half that size.

<img src=”https://example.com/myimage.png”>

.cropped {
width: 150px;
height: 150px;
overflow: hidden;
}

.cropped img {
margin: -150px 0px 0px -150px;
}

Object-Fit and Object-Position

You can use the object-fit CSS property to fit an item, such as an image, inside a specific container. The object-fit property uses values like fill, contain, cover, inherit, initial and more.

The object-position CSS property requires a location along the X- and Y-axes to reposition an item inside that container.

<img  src=”https://example.com/myimage.png”>

.cropped-ofp {
width: 150px;
height: 150px;
object-fit: cover;
object-position: 25% 25%;
}

Aspect Ratio Cropping With Calc() And Padding-top

As the title indicates, this allows you to crop an image to a specific aspect ratio. First, turn the image into a square by putting it inside an image container. This container should have its height set to 0, padding-top and width equal in value, and position set to relative.

.image-box {
position: relative;
width: 100%;
height: 0;
padding-top: calc(100% * (100 / 300));
}

After that, make sure the image has a width and height of 100%. Furthermore, maintain an absolute value for the position and a top value of 0. Now, for the fun part, use the calc() function to set the container (above code) to whatever aspect ratio you need.

.image-cropped-calc {
position: absolute;
top: 0;
width: 100%;
height: 100%;
object-fit: cover;
}

CSS Transforms

Cropping images using CSS Transforms expands on the aspect ratio cropping method that was previously covered. The key distinction is that we will resize, move, and rotate that image using the CSS Transform feature.

.image-cropped-transform {
position: absolute;
top: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 55%;
transform: scale(0.5) translate(0, 5%);
}

Or, you could try using an Image Transformation API to make your life easier!

Clip-Path() Function

We have to crop a picture, and the CSS clip-path() function is specifically made to display only a portion of an image. The remainder of the image is concealed.

The ability to customize the image position and form is a wonderful feature of this property. You have the ability to construct and position forms on the image, as well as specify the crop shape, because it employs coordinates to identify points in a 2D space.

The following are some of the values that CSS clip-path() uses: inset(), polygon(), circle(), path(), ellipse(). Each of them defines the shape of its name using multiple points.

This is a sample of how to crop an image to something like a rectangle using inset():

.cropped-image-clip-rectangle {
height: 100%;
clip-path: inset(20px 50px 10px 0 round 50px);
}

Below is a sample of how to crop an image to a triangular shape using the polygon() function:

.cropped-image-clip-polygon {
height: 100%;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

Benefits Of Cropping An Image

Usually, cropping a photo is done to get rid of an insignificant detail, alter the image’s aspect ratio, or enhance the composition as a whole. This section goes through some more benefits like this.

Subjective Focus

Removing any undesirable backgrounds from the original image is the primary and most evident purpose to crop an image. There can be a messy background, visible details, or people you don’t want to be in the photo. Cropping photos is frequently done to amplify the subject for expansion, in addition to improving composition. Cropping an image will make the subjects larger, improving the magnification of the image and allowing you to focus on a certain subject.

Always keep in mind that every image should be conveying a particular idea, story, or message. Multiple meanings being attempted to be conveyed inside one image just causes confusion in the viewer’s head. Always keep in mind that the message conveyed by the image should support or enhance the message conveyed by the surrounding text.

Reducing Excessive Visual Information

An image can become confusing if it contains too much visual information. It fails to capture the subject’s interest, which causes them to subconsciously dismiss and ignore the image. Focusing on the original point in order to eliminate any distractions or unneeded components is not a difficult task. However, it might be a factor that’ll affect various circumstances.

Your focus is kept on the main issue by removing off-center alignments or avoiding introducing random things into the frame.

Cropping For Composition

There is a popular rule with the name The Rule of Thirds. This rule tells you to divide your image into a 3×3 grid, align the essential parts along the grid lines, and crop as necessary. When you consider portraits, even, the portrait should align with grid lines. A much more fascinating image will be produced by using the Rule of Thirds, and the viewer will instinctively find one such composition more pleasant. If you edit your photos with Photoshop, you’ll discover that the cropping tool really displays a 3×3 grid to make cropping easier for you, or you can use smart image cropping using saliency.

Unusual Shapes

Reducing an image into a straightforward circle or other unconventional shape might make a website stand out. Rounding the corners is another somewhat secure choice. However, employing anything too “goofy,” like stars, disturbs the spectator, who will question the image right away. You’ve lost their focus on your message once they begin to consider your design decisions.

If there are various pictures on a site, it might be advantageous to treat those all in the same manner (unless there’s an obvious reason why not), as otherwise, it may appear to be an error or the viewer may start trying to interpret the differences, which will cause them to lose focus on your message.

Conclusion

This article went through various methods you could use to crop your image using CSS along with how you will benefit from it. If you need to crop using APIs, FileStack is the answer for it.

You can integrate everything using the Filestack API, rather than having to construct it all from scratch each time you add a new feature. FileStack API also employs image intelligence to filter and categorize your images! With just two lines of code, you may access more than twenty upload connectors. Head over to Filestack and sign up for free!

Read More →