How can I make an image responsive using only CSS?
Asked on Aug 28, 2025
Answer
To make an image responsive using only CSS, you can use the "max-width" property to ensure the image scales with its container while maintaining its aspect ratio.
<!-- BEGIN COPY / PASTE -->
<img src="example.jpg" alt="Responsive Image" style="max-width: 100%; height: auto;">
<!-- END COPY / PASTE -->Additional Comment:
- The "max-width: 100%;" rule ensures the image does not exceed the width of its container.
- "Height: auto;" maintains the aspect ratio of the image as it scales.
- This method works well for images within flexible grid or flexbox layouts.
- Ensure the container of the image is also responsive for the best results.
Recommended Links: