Home   |   About   |   Terms   |   Contact    
Read & Learn
 

Responsive Image with HTML & CSS

Web Design & Development

◄ All Articles


A new product.






Popular Google Pages:




This article is regarding Responsive Image with HTML & CSS.
Last updated on: .



◕ 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:
.responsive{
height: auto;
max-width: 100%;
}

The height of the image will follow the ratio with the width.

Please note:
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
► Eliminate Render Blolcking JavaScript or jQuery
► How google will trust a site?





Popular Google Pages:





Top of the page

Amazon & Flipkart Special Products

   


Top of the page