CSS

Responsive Image Using CSS

The main priority of today’s websites is that the website should be Responsive. And if you want to align images on those websites, you have to learn how to make images responsive.

There is two way to make an image responsive.

1) Using Bootstrap
2) using CSS

In this article, I’m explaining the concept of responsive images – images that will automatically fit the size of the window screen.

Prerequisites: You should already know the basic concept of HTML,CSS and how to add an image to the website.

Step 1) Add below the HTML

<!DOCTYPE html>
<html>
<head>
  <title>Responsive Image Using Css</title>
</head>
<body>
  <div id="myImg">
    <img src="Image.jpg" />
  </div>
</body>
</html>

Step 2) Add below the CSS

<style>
  #myImg{
    /*Responsive image*/    max-width: 100vh;
    max-height: 100vh;
    text-align:center; 
    /*End responsive image*/    padding:20px;                 
    /*To keep image cnter*/    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    /*End image center*/    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px; /*for div shadow*/  }
  img{
     max-width:100%; /*Responsive image*/     max-height: 100vh; /*Responsive image*/  }
</style>

OutPut :