5 Ways to Crop Images in HTML/CSS

element with a specified width and height, and set overflow to hidden. This ensures that the container keeps its structure, and that overflow of images included in the container will be hidden behind it.

To define the crop region, use the margins property. This attribute has four values, but you only need to fill in the first and last, because they represent the top and left pixel position.

The following code shows how to crop an image of width 300px and height 300px to a square half the size.

.cropped { width: 150px; height: 150px; overflow: hidden; } .cropped img { margin: -150px 0px 0px -150px; }

Crop Using object-fit and object-position

The object-fit CSS property is also useful for cropping images. It has 5 possible values—the cover value is the most useful for cropping. This maintains the aspect ratio of the image, ensuring it fits the dimensions of the content box.

You can use the object-fit property in conjunction with object-position to adjust the area of the image to crop. The object-position property requires two values: x% and y% to position the image (the default position is 50% 50%).

The code below uses the class cropped-ofp to crop an original image of 300px by 300px to half its original size, and positions it in the bottom left quadrant with object-position equal to 25% 25%.

See also  Inverted Microscope – Principle, Parts, Definition, Uses

Other object-fit values

For your reference, here are other options you can use for object-fit, which can also be used to crop images:

  • contain—scales the image to fit the container while maintaining its aspect ratio. Typically the image will not fill the container, unless its aspect ratio is identical to the container’s.
  • fill—resizes the image to fit the container. If the aspect ratio of the image is different from that of the container, the image is stretched or squeezed to fit.
  • none—displays the image in the container without resizing it.
  • scale-down—works similar to none or contain, but actually scales down the image, instead of just displaying it in a smaller size. This will result in a smaller file size.

Aspect Ratio Cropping with calc() and padding-top

This technique lets you crop an image to a desired aspect ratio. It requires a few steps:

  • Define an image with height set to 0 and padding-top equal to the width of the container. Set position to relative. .image-box { position: relative; width: 100%; height: 0; padding-top: calc(100% * (100 / 300)); }
  • Now set the image width and height to 100%, and define image position as absolute with a top value of 0. .image-cropped-calc { position: absolute; top: 0; width: 100%; height: 100%; object-fit: cover; }
  • You can now specify any aspect ratio to crop the image, by setting the padding-top value of the container using the calc() function.

Crop Using CSS Transforms

The CSS transform property lets you perform several image operations on an element, including rotate, scale, skew, and translate (reposition the element in the grid).

See also  Drivers Ed Course Test Answers

You can use the transform property to crop images by combining the scale and translate operations. Here is an example:

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

Crop with the clip-path() Function

The CSS clip-path() property is especially designed to show only part of an image, which is exactly what we need for cropping. The “clipped” region is displayed, while the rest of the image is hidden.

A nice thing about this property is that it lets you specify the shape and position of the crop. It uses coordinates to define points in a two-dimensional space, which you can use to create and position shapes on the image, and define the crop shape.

CSS clip-path() accepts one of the following functions as its accepted values:

  • inset()—defines an inset rectangle
  • circle()—defines a circle
  • ellipse()—defines an ellipse shape
  • path()—accepts an SVG path string, which can define an arbitrary shape
  • polygon()—defines a polygon using multiple points

Here is an example showing how to use inset() to crop the image to a rectangle:

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

Here is an example showing how to use polygon() function to crop the image to a triangle shape:

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

Fully Automated Image Resize and Cropping with Cloudinary

A cloud-based service for managing images and videos, Cloudinary offers a generous free-forever subscription plan. While on that platform, you can upload your images, apply built-in effects, filters, and modifications. You can also resize images automatically, focusing on the most important elements with AI or adapt them to your website design without having to manually crop or scale them.

See also  How to Change the Shape of a Photo in Canva ― Top Tips

You can set the target dimensions of your resized image by specifying width, height, and/or the target aspect ratio as qualifiers of your resize transformation.

You can change the dimensions of an uploaded image by setting the image’s height, width, and/or aspect ratio, and Cloudinary automatically resizes or crops the image to fit into the requested size.

For example, this original image is 1200 x 1200 pixels:

Resizing the image to 200 x 200 pixels, using crop, scale, fill and pad results in the following images:

Get started with automated resize and cropping today!

  1. Get a free Cloudinary account
  2. Create a simple image tag.
  3. Deliver the crop transformations using the following dynamic URLs: # focus on the model in portrait crop CloudinaryImage(“https://res.cloudinary.com/demo/image/upload/docs/model.jpg”).image(height=200, width=200, crop=”crop”) # detect the face for thumbnail crop CloudinaryImage(“https://res.cloudinary.com/demo/image/upload/docs/model.jpg”).image(height=200, width=200, crop=”crop”) # crop to a banner automatically focusing on region of interest CloudinaryImage(“https://res.cloudinary.com/demo/image/upload/docs/model.jpg”).image(height=200, width=200, crop=”crop”)