How to Crop and Center Images Automatically in CSS

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.

Watch a course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

Create HTML

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

Add 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:

<!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>

Result

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>

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" />
    <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" />
    <br>
  </body>
</html>

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:

<!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-1569867037406-6b9ad775b22e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60');
        background-position: center center;
        background-repeat: no-repeat;
        overflow: hidden;
      }
      .center-cropped img {
        min-height: 100%;
        min-width: 100%;
        opacity: 0;
      }
    </style>
  </head>
  <body>
    <div class="center-cropped">
      <img src="https://images.unsplash.com/photo-1569867037406-6b9ad775b22e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" />
    </div>
  </body>
</html>