How To Scale and Crop Images with CSS

A simple image when rightly used can speak louder about a business and its offerings to the target audience than words. When choosing the image to best explain a solution, one will likely encounter moments when it is necessary to crop particular portions of an image to better explain the details.

Image cropping is of great importance as it aids in giving focus to specific elements in an image and helps improve the visual impact and composition of the image.

In this article, we will look at cropping images with CSS using code samples. Finally, we will also see how using ImageKit can help you crop images easily and at scale without designer or developer dependencies.

To understand how to crop an image, you need a basic understanding of HTML and CSS.

The Different Methods of Image Cropping with CSS

There are several ways to crop images with CSS. This article sticks to explaining the 8 core ways you can crop images with CSS.

CLIP-PATH

CSS `clip path` is a property that allows users to define a clipping region to crop or mask an image. With this feature, users can utilize different functions and values to define the clipping path. Here are some examples:

.image1 {
  width: 200px;
  height: 200px;
  clip-path: circle(50% at center);
}

The code above sets the width and height of the image to 200px. The value attached to the `clip-path` property will create a circular clipping path for the image that covers 50% of its size and is centered within the element. This is the result below.

Values for clip-path can vary thus forming several shapes. Other values include

1. Ellipse Shape

.image2 {
  width: 200px;
  height: 200px;
  clip-path: ellipse(50% 25% at center);
}

This code will create an elliptical `clip-path` that covers 50% of the image's width and 25% of its height, centered within the element.

2. Inset Image

.image3 {
  width: 200px;
  height: 200px;
  clip-path: inset(10px 20px 30px 40px);
}

This code will create an inset `clip-path`, cropping the image by 10 pixels from the top, 20 pixels from the right, 30 pixels from the bottom, and 40 pixels from the left.

3. Polygon Shape

.image4 {
  width: 200px;
  height: 200px;
  clip-path: polygon(0 0, 100% 0, 100% 50%, 50% 100%, 0 50%);
}

This code will create a custom polygonal `clip-path` that defines a five-sided shape.

To view the complete code, check out this codepen.

OVERFLOW: HIDDEN

The `overflow: hidden` property is used to hide any part of an image that exceeds the boundaries of the container. To use this property, there is a need to wrap the image within a container element and apply the `overflow: hidden` property to the container. This will ensure the restriction of the visible area of the image to fit the dimension specified for the container. The code below illustrates how it works.

.image-container {
  width: 300px;
  height: 200px;
  overflow: hidden;
}

.image {
  width: 100%;
  height: auto;
}

The code above gives the result below

The ` .image-container` is given a fixed width and height of 300px and 200px, which represents the desired size of the cropped image. An `overflow: hidden` property was applied to the container to hide any content that exceeds the specified size.

The `.image` class handles the image to be displayed and ensures it fills the desired size of the container by setting the width to 100% and also maintains the aspect ratio by setting the height: auto.

To view the full code, check out this code pen here

BACKGROUND-SIZE, BACKGROUND-POSITION, AND BACKGROUND-CLIP

These three properties, when applied can crop any image of choice.

The background-image property in CSS is used to set the background image of an element and the background-size property is used to control the size of the background image.

1. Background Image with cover size

.image-container {
  width: 300px;
  height: 200px;
  background-image: url('https://ik.imagekit.io/demo/tr:h-300/sample_image.jpg');
  background-size: cover;
  background-repeat: no-repeat;
}

Enabling the `background-size: cover` makes the background image scaled proportionally to cover the entire container and crop any part that exceeds the container boundaries.

2. Background Image with Contain size

.image-container {
  width: 300px;
  height: 200px;
  background-image: url('https://ik.imagekit.io/demo/tr:h-300/sample_image.jpg');
  background-size: contain;
  background-repeat: no-repeat;
}

Enabling the `background-size: contain` makes the background image scaled proportionally to fit within the container without cropping it. This value ensures that the image is visible enough and its aspect ratio is preserved. For this property, the entire image will be visible, and it may not cover the entire container. Any space within the container will show the background or content behind the image.

c. Background Image with Custom Size

.image-container {
  width: 300px;
  height: 200px;
  background-image: url('https://ik.imagekit.io/demo/tr:h-300/sample_image.jpg');
  background-size: 50% 70%;
  background-repeat: no-repeat;
}

The `background-size` is set to a custom size in this code example. The value 50% and 70% represents the width and height of the background image as percentages of the container's width and height, respectively. This custom value specifies the portion of the image to be displayed within the container.

To view the complete code, check it out on Code Pen.

BACKGROUND POSITION

The `background-position` property enables a user to position the image within its container.

1. Background-position: Center

.image-position1 {
  width: 300px;
  height: 200px;
  background-image: url('https://ik.imagekit.io/demo/tr:h-300/sample_image.jpg');
  background-position: center;
  background-repeat: no-repeat;
}

With the `background-position: center`, the background image is centered within the element.

Other values normally assigned to the background-position property include top-right, bottom left, or any custom position, etc.

To view the complete code, check it out on code pen.

BACKGROUND CLIP

The CSS `background-clip` property is used to control how the background image is clipped or displayed relative to its borders. For instance:

.image1 {
  width: 300px;
  height: 200px;
  background-image: url('https://ik.imagekit.io/demo/tr:h-300/sample_image.jpg');
  background-size: cover;
  background-clip: padding-box;
}

This code takes the width and height of an `image1` as 300px and 200px respectively, and gives the background clip a value for `padding-box`. The `padding box` value crops the background image within the padding area and hides the image outside the element’s content area.

Other possible values for the background-clip element are `border-box` and `content-box`.

To view the complete code, check out this codepen.

OBJECT FIT AND POSITION

The CSS `object-fit` property enables the control of an image within its container. It allows for the specification of how an image should be resized. On the other hand, the `Object-position` property allows for the control of the position of an image within its container.

a. Object fit: Cover

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

The `object-fit: cover` property ensures that the image covers the entire space of the element while also preserving its aspect ratio. Any excess portion of the image will be cropped to fit within the container.

b. Object-fit: Contain

.image {
  width: 200px;
  height: 200px;
  object-fit: contain;
}

With the `object-fit: contain` property, the image is scaled to fit within the container while preserving its aspect ratio. For this property, the entire image will be visible, and it may not cover the entire container. Any space within the container will show the background or content behind the image.

c. Object-position: top right

.image {
  width: 200px;
  height: 200px;
  object-fit: cover;
  object-position: top right;
}

The `object-position: top right` property specifies that the image should be positioned at the top right corner of the container while the `object-fit: cover` in the code property ensures that the image fills the container while maintaining its aspect ratio.

d. Object-position: center bottom

.image {
  width: 200px;
  height: 200px;
  object-fit: cover;
  object-position: center bottom;
}

The `object-position: center bottom`, positions the image at the center horizontally and at the bottom vertically within the container. This creates a cropping effect that removes the top and sides of the image.
To view the complete code, check it out on code pen.

TRANSFORM: SCALE

The CSS `transform: scale` property allows the user to scale, resize, and images.

.image {
  width: 300px;
  height: 200px;
  position: relative;
}

.image img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
}

In this code snippet, the position: relative property on the container is used to establish a positioning context.

Inside the .image element, the position of the `img` element is set to absolute, its top: 50% and its left: 50% to position it in the center of the container. The transform: translate(-50%, -50%) scale(0.8) property scales the image by a factor of 0.8, making it larger in both width and height. The translate(-50%, -50%)  part ensures the image remains centered within the container after scaling.

To view the complete code, check it out on code pen.

BORDER RADIUS

The CSS `border-radius` property can be used to crop images. This is illustrated below:

.image1 {
  width: 300px;
  height: 200px;
  border-radius: 50%;
}

The dimensions of the `.image1` element are set to 300px width and 200px height with a `border-radius: 50%`. This creates a circular shape for the element and results in a cropped image with rounded corners. The border-radius property can be used with different values to create other shapes and cropping effects. For instance:

.image2 {
  width: 300px;
  height: 200px;
  border-radius: 10px 50% 30px 20px;
}

The `border-radius:10px 50% 30px 20px` creates an elliptical-shaped image with varying radii on each corner.

To view the complete code, check out this code pen.

BACKGROUND CLIP

The CSS background-clip property is used to control how the background image is clipped or displayed relative to its borders. For instance:

.image {
  width: 300px;
  height: 200px;
  background-image: url('https://ik.imagekit.io/demo/tr:h-300/sample_image.jpg');
   background-clip: padding-box;
}

This code takes the width and height of an image as 300px and 200px respectively and gives the background clip a value for padding-box. The padding box value crops the background image within the padding area and hides the image outside the element’s content area.

Other possible values for the background-clip element are border-box and content-box.

To view the complete code, check out this codepen.

DISADVANTAGE OF CSS-BASED CROPPING

One thing to note is that with CSS-based cropping, you are still downloading the full image to the browser, and then cropping it which means there is a higher bandwidth usage (or data transfer). What if your image delivery service itself could do this in real-time on the server, so that instead of downloading a larger un-cropped image you could download a smaller cropped version directly?

With this method, image cropping will not be difficult, and 90% time you just need basic cropping (rectangular) that focuses on the right part of the image and you need to do this across platforms. This is what ImageKit helps with.

Effortlessly Crop Your Images In Real-Time with ImageKit

ImageKit.io is an image management service for online businesses that provide intelligent real-time image optimization, resizing, cropping, and fast CDN delivery.

It is an image transformation tool with 50+ transformations that help companies and developers quickly implement image optimization and real-time resizing in their web applications without worrying about scale.

With ImageKit, it is relatively easy to crop or transform an image to suit the required business need. It does this through its vast cropping features. These cropping features include:

Maintain ratio crop strategy - (c-maintain_ratio)

This is the default crop strategy. If nothing is specified in the URL, this strategy gets applied automatically. In this strategy, the aspect ratio is preserved and this is accomplished by resizing the image to the requested dimension and in the process cropping parts from the original image.

The code below illustrates how it works:

• https://ik.imagekit.io/marvelkalu/new_sample_image.png?tr=w-300,h-200 or
• https://ik.imagekit.io/marvelkalu/new_sample_image.png?tr=w-300,h-200,c-maintain_ratio

Pad resize crop strategy - (cm-pad_resize)

The performs the task of preserving the aspect ratio of an image without cropping by adding padding around the output image to make it match the exact dimensions specified.

A perfect example is the URL below:

https://ik.imagekit.io/marvelkalu/new_sample_image.png?tr=w-100,h-200,cm-pad_resize,bg-1C2125

This image is given a width of 300px and a height of 200px. The cm-pad_resize strategy is used to add a pad around the image and give the pad a black color.

Forced crop strategy - (c-force)

This forcefully squeezes the original image to get it to fit completely within the specified output dimensions. There is no cropping involved and it does not preserve the aspect ratio of the image.

To illustrate this strategy, let us examine this URL:

https://ik.imagekit.io/marvelkalu/new_sample_image.png?tr=w-300,h-100,c-force

The strategy forces the image to fit into the specified dimensions

Max-size cropping strategy - (c-at_max)

This strategy ensures the whole image content is preserved without cropping, and the aspect ratio is preserved. To illustrate this strategy, let us examine this URL:

https://ik.imagekit.io/marvelkalu/new_sample_image.png?tr=w-300,h-100,c-at_max

Max-size-enlarge cropping strategy - (c-at_max_enlarge)

This strategy is similar to the max-size cropping strategy with the addition that it also allows an image to enlarge more than its original dimensions.

The URL below illustrates this strategy:

https://ik.imagekit.io/marvelkalu/new_sample_image.png?tr=w-300,h-200,c-at_max_enlarge

Min-size cropping strategy - (c-at_least)

This strategy is similar to the max-size cropping strategy, however, unlike the max-size strategy, the image is equal to or larger than the requested dimensions.  The URL below illustrates this strategy:

https://ik.imagekit.io/marvelkalu/new_sample_image.png?tr=w-300,h-200,c-at_least

Extract crop strategy - (cm-extract)

In this strategy, the aspect ratio is preserved and instead of trying to resize the image, a region of the requested dimension from the original image is extracted. The URL below illustrates this strategy:

https://ik.imagekit.io/marvelkalu/new_sample_image.png?tr=w-300,h-200,cm-extract

Imagekit also has a smart auto-crop feature that uses AI to intelligently determines the most important part of the image and keeps it in focus while cropping the image. It is one great feature that completely stands out from CSS and is perfect for generating thumbnails that are centered on the image’s subject.

Cropping images on a large scale can be quite a difficult task. When cropping images, it is important to preserve the aspect ratio of the image. An image CDN like Imagekit.io can handle all your cropping needs and give the exact quality required.

Get started with a free trial. Setting up your account only takes a few minutes and our plan is free until you are ready to upgrade.