W3docs
en
Log in

How to Crop and Center Images Automatically in CSS

There are many ways of cropping and centering an image in CSS. Read and find examples with the background-image and object-fit properties, and the <img> tag.

Tags

There are many ways of cropping and centering an image in CSS. For that, you can use the background-image and object-fit properties, or the HTML <img> tag.

First, we’re going to show and explain an example where we use the background-image property.

Create HTML

  • Use a <div> with the class name "center-cropped".

How to Crop and Center an Image Automatically in CSS

<div class="center-cropped"></div>

Add CSS

How to Crop and Center an Image Automatically in CSS

.center-cropped {
  width: 300px;
  height: 300px;
  background-image: url('https://images.unsplash.com/photo-1569878698889-7bffa1896872?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60');
  background-position: center center;
  background-repeat: no-repeat;
}

Let’s see the final code.

Example of cropping an image by using the background-image property:

Example of cropping an image using background-image:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .center-cropped {
        width: 300px;
        height: 300px;
        background-position: center center;
        background-repeat: no-repeat;
        background-image: url('https://images.unsplash.com/photo-1569878698889-7bffa1896872?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60');
      }
    </style>
  </head>
  <body>
    <div class="center-cropped"></div>
  </body>
</html>
Try it Yourself »

Result

<div class="demo px-2.5 mt-1 mb-5 not-prose"> XFI6 </div> </div> To crop an image proportionally, you can add the background-size property set to “cover”. See the difference by comparing the example above with the following one.

Example of cropping an image proportionally with the background-size property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .center-cropped {
        width: 300px;
        height: 300px;
        background-image: url('https://images.unsplash.com/photo-1569878698889-7bffa1896872?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60');
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
      }
    </style>
  </head>
  <body>
    <div class="center-cropped"></div>
  </body>
</html>
Try it Yourself »

The advantages of using this method include good browser support and the possibility of changing an image position due to background image properties.

In our next example, we use the object-fit property allowing us to specify how an image must be resized. Like the background image, this property also allows changing image position.

Example of cropping an image with the object-fit property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .center-cropped {
        object-fit: cover;
        object-position: center;
        height: 200px;
        width: 200px;
      }
    </style>
  </head>
  <body>
    Center-cropped image:
    <br />
    <img class="center-cropped" src="https://images.unsplash.com/photo-1569867037406-6b9ad775b22e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="Center-cropped image using object-fit" />
    <br /> Normal image:
    <br />
    <img src="https://images.unsplash.com/photo-1569867037406-6b9ad775b22e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="Original image" />
    <br />
  </body>
</html>
Try it Yourself »

Here, you can see the center-cropped image, as well as the original one.

Let’s see our last example where we use the <img> tag, which gives the possibility to use the right-click to save the image.

Example of cropping an image by using the <img> tag:

Example of cropping an image using the <img> tag:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .img-wrapper {
        width: 300px;
        height: 300px;
        overflow: hidden;
      }
      .img-wrapper img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    </style>
  </head>
  <body>
    <div class="img-wrapper">
      <img src="https://images.unsplash.com/photo-1569867037406-6b9ad775b22e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="Center-cropped image using overflow hidden" />
    </div>
  </body>
</html>
Try it Yourself »