Responsive Image vs specify the width and height of an image in HTML - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Responsive Layout

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Responsive Layout

Description

Responsive Image vs specify the width and height of an image in HTML

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
img {<!--from   w w  w  .j av  a2s  . com-->
   max-width:100%;
   height:auto;
}

.img-wrapper {
   max-width:201px;
}

.img-wrapper2 {
   background:blue;
   height:0;
   padding-bottom:100%;
}
</style> 
 </head> 
 <body> 
  <div style="width: 50px;"> 
   <div class="img-wrapper"> 
    <div class="img-wrapper2"> 
     <img src="https://www.java2s.com/style/demo/Firefox.png" width="200" height="200" alt="Alt Text"> 
    </div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials