Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Make an Image Responsive in HTML
Responsive images will automatically adjust to the size of the screen and to the tab size.
To make image responsive first we must add image to the web page using <img> tag, then by using style sheet we can change the parameters of the image to make an image responsive in HTML.
Syntax
Following is the syntax to make an image responsive in HTML.
<img src="image.jpg" alt="alternate text?" style= "width: 100%;height: auto">
Example
Following is the example program to make an image responsive in HTML. In here, we have used inline style sheet.
<!DOCTYPE html> <html> <head> </head> <body> <h3>Responsive Image</h3> <img src="https://www.tutorialspoint.com/coffeescript/images/coffeescript-mini-logo.jpg" alt="test image" class="responsive" style="width: 100%;height: auto"> </body> </html>
On executing the above program an image is displayed and you can adjust the displayed image.
Example
In the below example we have used the internal style sheet.
<!DOCTYPE html> <html> <head> <style> .responsive { width: 100%; height: auto; } </style> </head> <body> <h3>Responsive Image</h3> <img src="https://www.tutorialspoint.com/coffeescript/images/coffeescript-mini-logo.jpg" alt="test image" class="responsive" > </body> </html>
On executing the above program an image will be displayed. If we want to restrict a responsive image to a maximum size, we use the max-width property, with a pixel value.
Example
Following is the example program to make restrict to the maximum size of a responsive image.
<!DOCTYPE html> <html> <head> <style> .responsive { max-width: 100%; height: auto } </style> </head> <body> <h3>Responsive Image</h3> <img src="https://www.tutorialspoint.com/coffeescript/images/coffeescript-mini-logo.jpg" alt="test image" class="responsive" > </body> </html>
6K+ Views
