forum

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

Ask Question
Utpal Vishwas

Utpal Vishwas

Follow
I am Utpal Vishwas from Uttar Pradesh. Have completed my B. Tech. course from MNNIT campus Prayagraj in 2022. I have good knowledge of computer networking.

Can you answer this question?

Answer

1 Answers

Aryan Kumar

Aryan Kumar

07-Jun-2023

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.

Liked By