5 Ways to Crop Images in HTML/CSS

How Does Image Cropping Work in HTML and CSS?

Cropping is the process of removing certain regions of an image and reducing image size accordingly. It can be used to focus on specific elements in an image, remove extraneous details, or reframe the subject to attract attention to a specific part of an image.

You can crop images using plain HTML5 and CSS code, without using JavaScript or any other scripting language. We’ll show several techniques for achieving this, most of which take advantage of CSS properties like width, height, overflow, object-fit, object-position, and padding-top. Another option is to use Cloudinary to automatically crop images with smart detection of relevant objects in the image.

In this article:

• What Are the Benefits of Cropping an Image?
  • Concentrate On A Subject
  • Remove Too Much Visual Information
  • Cropping for Composition
  • Unusual Shapes
  • Crop Using Width, Height, and Overflow CSS Properties
  • Crop Using object-fit and object-position
  • Aspect Ratio Cropping with calc() and padding-top
  • Crop Using CSS Transforms
  • Crop with the clip-path() Function
• Fully Automated Image Resize and Cropping with Cloudinary

What Are the Benefits of Cropping an Image?

Concentrate On A Subject

Cropping an image enables you to zoom in or out on a subject. You can use this technique to engage a subject and increase the photo’s magnification. As a result, you shift the focus to the subject.

Remove Too Much Visual Information

Too much visual information can create a distracting effect. Instead of attracting the subject’s attention, it distracts, and as a result, the viewer ignores the image. Cropping images can help you shift the focus to the main topic, remove unnecessary information and inappropriate positions, and prevent random objects from interfering with the frame.

Cropping for Composition

You can use image cropping techniques for image composition. For example, you can split the image into 3×3 grids, align elements on the grid lines, and crop according to the Rule of Thirds. In portraits, you can match the eyes to the grid lines, and in other images, you can shift the focus to the main theme.

Unusual Shapes

Ideally, users should view a web page while following messages and call to action (CTAs) prompts. They should not stop to analyze the design. Unusual shapes, like diamonds and stars, can make viewers pause to consider the reason behind the shape, shifting their focus from the message to the design. You can crop these shapes into a circle or any shape that keeps your audience engaged with the message.

Crop Using Width, Height, and Overflow CSS Properties

In addition to the well-known width and height properties, CSS containers have an overflow property you can use to crop images.

To enable the overflow property, wrap the image in a <div> element with a specified width and height, and set overflow to hidden.

HTML:

<div class="wrap">
    <img src="dogs.jpg" class="myImage">
</div>

CSS:
.wrap {
    width: 400px;
    height: 400px;
    overflow: hidden;
}

Example:

The next image has 640px width and 480px height, and we will wrap it in a 400px x 400px container:

Original Image:

Cropped Image:

This ensures:

1. The container keeps its structure,
2. The overflow of images included in the container will be hidden behind it.

Define the Crop Region

As you can see, now the dogs are out of focus.

We can fix it by taking advantage of the CSS margin property.

The margin property has four values: top, right, bottom, and left.

But instead of setting the values on positives, we will use the negative values to move the image to center the dogs.

In this case, we need to move the image to the left, and a little bit to the top.

.myImage {
    margin: -40px 0px 0px -120px;
}

Now the dogs looks pretty good!

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%.

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

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

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).

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.

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")