Make an Image Responsive in CSS

Make an Image Responsive in CSS

by

Make an Image Responsive in CSS

Make an Image Responsive in CSS. In this Article we will look into how to make our Image responsive.

Google , take Responsive Website into account seriously in terms of SEO.

Responsive Image will increase user experience . This will enhance our site usability, when the User access our site using different type of devices.

In Order to make our image Responsive, there are a few step that we need to do below.

  • Adjust Maximum width and height in CSS
  • Set your Height to Auto
  • Add some padding to your image  (Optional)

The Commands involve to make this happens are:

  • max-width
  • height
  • padding

Refer the Code Below

HTML

 

<!DOCTYPE html>
<html>
    
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>GETTING STARTED WITH BRACKETS</title>
        <meta name="description" content="Just another Website.">
        <link rel="stylesheet" href="main.css">
        <link href="https://fonts.googleapis.com/css?family=Arvo|Indie+Flower|Ranchers" rel="stylesheet">
    </head>
    <body>
     
      <div class="container">
          <img src="images.jpg " class="borderImage">
                
        </div>       
        
    </body>
</html>

 

CSS

 

img{
   max-width: 100%;
   height:auto;
   padding:5px;
    
    
}


.borderImage{
  border-radius: 10px;
  width: 300px;
  height: 300px;
  border : 3px solid #ddde;
  padding : 20 ;
  
}

 

Check out why is responsive Images are so important over here

Check out how to create image thumbnail using CSS here

Leave a Comment

twenty − ten =