There are several ways to crop an image in CSS; however, the simplest and most effective of these are:
- Using object-fit on the image.
- Using width, height, and overflow on the image container.

# Using object-fit

The **object-fit CSS property** can be used to easily crop images. It can have five values, but cover is the most suitable.
By setting `object-fit: cover;`, the aspect ratio of the image is preserved while still fitting into the size of its content box.

The `object-fit` property can be used 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%`). We can also provide pixel positions: `xpx` and `ypx`, but that is usually not useful.

Consider this $480$ x $240$ pixel image of a puppy; it has been cropped using `object-fit` and adjusted using `object-position`. Experiment by changing its values and note the output:

.cropped1 {
    width: 200px; /* width of container */
    height: 200px; /* height of container */
    object-fit: cover;
    border: 5px solid black;
}
.cropped2 {
    width: 200px; /* width of container */
    height: 200px; /* height of container */
    object-fit: cover;
    object-position: 20% 10%; /* try 20px 10px */ 
    border: 5px solid black;
}

<html>
 <head>
 </head>
 <body>
   <div>
    <h3> Original image: </h3>
    <img
     src="https://hips.hearstapps.com/ghk.h-cdn.co/assets/17/30/2560x1280/landscape-1500925839-golden-retriever-puppy.jpg?resize=480:*"
    >
    <h3> Cropped image using object-fit: </h3>
    <img
     class="cropped1"
     src="https://hips.hearstapps.com/ghk.h-cdn.co/assets/17/30/2560x1280/landscape-1500925839-golden-retriever-puppy.jpg?resize=480:*"
    >
    <h3> Cropped image adjusted with object-position: </h3>
    <img
     class="cropped2"
     src="https://hips.hearstapps.com/ghk.h-cdn.co/assets/17/30/2560x1280/landscape-1500925839-golden-retriever-puppy.jpg?resize=480:*"
    >    
   </div>
 </body>
</html>

codemirror

# Using width, height, and overflow

Along with **width** and **height**, CSS containers also have an **overflow property** that can be used for image cropping. To activate the overflow property enclose the image, within a div of a particular width and height, and set `overflow:hidden`. This will ensure that the base container will retain its structure, and any image overflow will be hidden *behind* the container.

Finally, the **margin property** is used on the image to adjust the cropped area. This property takes four values. However, only the first and last of the four values are essential as they represent the pixels from the top, and the left, respectively. 


Consider the example below; it​ uses the same $480$ x $240$ image of a puppy. Experiment with the values of `width`, `height` and `margin`, note the output: 

.cropped {
    width: 150px; /* width of container */
    height: 150px; /* height of container */
    overflow: hidden;
    border: 5px solid black;
}

.cropped img {
    margin: -10px 0px 0px -180px;
}

<html>
 <head>
 </head>
 <body>
    <h3> Original image: </h3>
    <img
     src="https://hips.hearstapps.com/ghk.h-cdn.co/assets/17/30/2560x1280/landscape-1500925839-golden-retriever-puppy.jpg?resize=480:*"
    >
    <h3> Cropped image: </h3>
    <div class="cropped">
      <img
      src="https://hips.hearstapps.com/ghk.h-cdn.co/assets/17/30/2560x1280/landscape-1500925839-golden-retriever-puppy.jpg?resize=480:*"
      >
    </div>
 </body>
</html>

How to crop an image in CSS

Using object-fit The object-fit CSS property can be used to easily crop images. It can have five values, but cover is the most suitable. By setting object-fit: cover;, the aspect ratio of the image is preserved while still fitting into the size of its content box. The object-fit property can be used 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%). We can also provide pixel positions: xpx and ypx, but that is usually not useful. Consider this 480480480 x 240240240 pixel image of a puppy; it has been cropped using object-fit and adjusted using object-position. Experiment by changing its values and note the output: 