CSS Responsive Images

Making images responsive ensures they adjust to different screen sizes without distortion. This is essential for mobile-friendly web design.

1. Basic Responsive Image Using max-width

Setting max-width: 100%; makes images scale down but not stretch beyond their original size.

img {
    max-width: 100%;
    height: auto; /* Maintains aspect ratio */
}

Try It Now

2. Responsive Image with width: 100%

Setting width: 100% forces images to stretch and fill the container.

img {
    width: 100%;
    height: auto;
}

Try It Now

3. Using object-fit for Cropping

The object-fit property ensures images are cropped correctly within their containers.

img {
    width: 100%;
    height: 300px;
    object-fit: cover; /* Maintains aspect ratio while filling container */
}

Try It Now

4. Using picture and srcset for Adaptive Images

Use **HTML5’s** picture and srcset to serve different images based on screen size.


    
    
    Responsive Image

Try It Now

5. Making Images Circular

Use border-radius to create circular images.

img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
}

Try It Now

6. Using CSS Media Queries for Image Resizing

Apply different styles based on screen size.

@media (max-width: 600px) {
    img {
        width: 80%;
    }
}

Try It Now

Conclusion

Using **CSS properties like max-width, object-fit, srcset, and media queries**, you can make images adapt to any screen size.