How can you make an image responsive and adjust its size based on the screen size using CSS?

Question

Aryan Kumar · Answer

To make an image responsive and adjust its size based on the screen size using CSS, you can use the `max-width` property and set it to `100%`. This allows the image to automatically scale down proportionally to fit its container while maintaining its aspect ratio. Here's an example:

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

In the above code, the `max-width` property ensures that the image's width does not exceed the width of its container. The `height` property set to `auto` maintains the image's aspect ratio, so it scales proportionally based on the width.

Additionally, you may want to consider setting a `max-height` property to limit the height of the image in case it needs to scale down. This can help prevent the image from becoming too large on smaller screens.

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

By adding the `max-height` property, the image will scale down in both width and height to fit its container while maintaining its aspect ratio.

Remember to apply these CSS rules to the appropriate CSS selector that targets the images you want to make responsive.

forum

How can you make an image responsive and adjust its size based on the screen size using CSS?

Can you answer this question?

1 Answers