How to Crop Image in CSS?

Last Updated : 15 Nov, 2024

Cropping images using CSS is an effective way to display only a portion of the image without altering the image file itself. Cropping can allow the designers to focus on the specific parts of the image while maintaining control over how the image fits within the layout.

1. Using overflow Property

This approach can rely on setting the dimensions of the container and using the overflow: hidden property to ensure that any part of the image that extends beyond the container is not visible. The content can be clipped to fit the container.

Syntax

.container {
    width: 300px;
    height: 200px;
    overflow: hidden;
    /* Hide content outside the bounds */
}

.container img {
    width: 400px;
    /* Image size exceeds container width */
    height: auto;
    /* Maintain aspect ratio */
}

HTML

<!DOCTYPE>
<html>
  
<head>
    <style>
        .container {
            width: 300px;
            height: 200px;
            overflow: hidden;
        }
        .container img {
            width: 400px;
            height: auto;
        }
    </style>
</head>

<body>
    <div class="container">
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240911105255/geekforgeek.png" 
             alt="Sample Image">
    </div>
</body>

</html>

Output

2. Using clip-path Property

The clip-path property can allows you to create the clipping region where only the portion of the image inside the region is visible. We can clip the image in the different shapes lik rectangles, circles, elipses, and polygons.

Syntax

img {
    clip-path: circle(50%);
    /* Creates a circular crop of the image */
    width: 300px;
}

HTML

<!DOCTYPE html>
<html>
  
<head>
    <style>
        img {
            clip-path: circle(50%);
            width: 300px;
        }
    </style>
</head>

<body>
    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240911105255/geekforgeek.png" 
         alt="Sample Image">
</body>

</html>

Output

3. Using background-image Property

Using the image as a background can allows more flexibility in the cropping, since you can control how image can be displayed within the container using the background-size and background-position properties. This is commonly used for creating the image containers with specific dimensions.

Syntax

.container {
    width: 300px;
    height: 200px;
    background-image: url('image.jpg');
    background-size: cover;
    /* Crops and scales the image to fill the container */
    background-position: center;
    /* Centers the image */
}