Responsive Images

Responsive images automatically adapt to different screen sizes while maintaining their proportions and fitting properly inside the available space.

What is a Responsive Image?

A responsive image is an image that adjusts its size according to the width of the screen or the size of its parent container.

This is important because a large image that looks good on a desktop may overflow or become difficult to display on a mobile screen.

Responsive images resize according to the available screen space.

Responsive Image Concept

Making an Image Responsive

One of the simplest ways to make an image responsive is to use max-width: 100% and height: auto.

.responsive-image {
    max-width: 100%;
    height: auto;
}

Example: Responsive Image

.responsive-image-example {
    width: 100%;
    max-width: 700px;
    height: auto;
    border-radius: 8px;
}

Output

Resize the browser window to see how the image adapts to the available width.

Using width: 100%

You can also use width: 100% when you want an image to occupy the full width of its container.

.full-width-image {
    width: 100%;
    height: auto;
}

Responsive Images with object-fit

The object-fit property controls how an image fits inside a specific width and height.

.cover-image {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 8px;
}

Output

object-fit: cover fills the defined area while keeping the image proportionally cropped.

Using the Picture Element

HTML also provides the <picture> element for serving different image files depending on screen conditions.

<picture>
    <source media="(max-width: 600px)"
            srcset="mobile-image.jpg">

    <source media="(max-width: 1000px)"
            srcset="tablet-image.jpg">

    <img src="desktop-image.jpg"
         alt="Responsive example">
</picture>

Responsive Background Images

Background images can also be adapted using CSS properties such as background-size: cover.

.hero-image {
    width: 100%;
    min-height: 250px;
    background-image: url("image.jpg");
    background-size: cover;
    background-position: center;
}

Common Properties for Responsive Images

Responsive Image Best Practices

• Use max-width: 100% for flexible images.
• Use height: auto when maintaining the original aspect ratio.
• Use appropriate image sizes instead of extremely large files.
• Always provide meaningful alt text.
• Use the <picture> element when different image sources are required.

Real-World Uses

• Training institute websites
• E-commerce product images
• Portfolio websites
• Blog and news websites
• Landing pages
• Responsive dashboards