Popular Google Pages:
This article is regarding Responsive Image with HTML & CSS.
Last updated on: 28th November 2016.
◕ What is Responsive Image?
- Responsive image means the image that re-acts with the size of the window.
We can use CSS to make a responsive image.
◕ Use CSS to make a Responsive Image?
Add a class to the image tag as the following example and get a responsive image.
Our Image tag in our HTML file:
<img src="India-Map.jpg" class="responsive" alt="Map of India">
In your CSS file:
The height of the image will follow the ratio with the width.
In the above example, if we use width: 100%; the image can be scaled larger than its original size . If we use max-width:100%; property the image will never scale up larger than its original size.
◕ Related articles:
► How to make XML Sitemap?
► Robots.txt Fetch Error
► How to find URL of my Twitter Account?
► Difference between .html & .htm
► List of wildcard used in MySQL
► MySQL match a string
► Eliminate render blocking CSS
► How google will trust a site?
Top of the page