How do I make an image responsive in HTML?

Asked on Oct 21, 2025

Answer

To make an image responsive in HTML, you can use the <img> tag with CSS properties that allow it to scale according to the size of its container. This is commonly achieved by setting the max-width property to 100% and the height to auto.

<!-- BEGIN COPY / PASTE -->
    <img src="image.jpg" alt="Description of image" style="max-width: 100%; height: auto;">
    <!-- END COPY / PASTE -->

Additional Comment:

The max-width: 100%; ensures the image does not exceed the width of its container.
The height: auto; maintains the aspect ratio of the image.
Using alt attribute provides a text alternative for accessibility and SEO.

✅ Answered with HTML best practices.

How do I make an image responsive in HTML?

Asked on Oct 21, 2025

Answer

Additional Comment:

The Q&A Network