How do I make an image responsive in Tailwind CSS so it scales correctly on mobile?
Asked on Aug 29, 2025
Answer
To make an image responsive in Tailwind CSS, you can use the `w-full` class to ensure the image takes up the full width of its container, and `h-auto` to maintain its aspect ratio. This approach allows the image to scale correctly on different screen sizes, including mobile.
<!-- BEGIN COPY / PASTE -->
<img src="path/to/image.jpg" alt="Responsive Image" class="w-full h-auto">
<!-- END COPY / PASTE -->Additional Comment:
- The `w-full` class makes the image take the full width of its parent container.
- The `h-auto` class ensures the image maintains its aspect ratio when resized.
- Ensure the parent container has a defined width for the image to scale properly.
- Combine with responsive utilities like `max-w-xs`, `max-w-sm`, etc., for more control.
Recommended Links: