- Trending Categories
- Data Structure
- Operating System
- C Programming
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to make an image responsive in HTML?
59 Lectures 8.5 hours
68 Lectures 8 hours
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%;"
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.
<!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>
- Make an image responsive with Bootstrap
- How to scale down an image with CSS to make it responsive
- How to create a responsive Image Grid with HTML and CSS?
- How to display an image in HTML?
- How to create a responsive image with CSS?
- How to Insert an Image in HTML Page?
- Make a table responsive using the table-responsive class
- How to create a responsive image gallery with CSS
- How to use an animated image in HTML page?
- How to specify an image as a client-side image-map in HTML?
- How to create clickable areas in an image in HTML?
- How to use an image as a link in HTML?
- Use CSS width property for responsive image
- How do we create an image map in HTML?
- How to save HTML Canvas as an Image with canvas.toDataURL()?