Computer >> Computer tutorials >  >> Programming >> HTML

How to make an image responsive in HTML?


To make an image responsive, you need to set two properties. Add image using the <img> tag and add CSS style for height and max-width to make it responsive. For example, style="height:auto;max-width:100%;"

How to make an image responsive in HTML?

You can try to run the following code to make an image responsive in HTML −
Note − To check the responsiveness of an image, resize the browser tab. If the image resizes correctly, then it means it is responsive.

Example

<!DOCTYPE html>
<html>
   <head></head>
   <body>
      <img src="https://www.tutorialspoint.com/images/video_tutorial_intro.jpg" alt="Video Tutorials" style="height:auto;max-width:100%;">
   </body>
</html>

Output

How to make an image responsive in HTML?