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:
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