Fit, scale and center image responsively to browser window - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Responsive Layout

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

Description

Fit, scale and center image responsively to browser window

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">
.container {<!--   w w w  .j a  v  a2 s.  co m-->
   width:81%;
   height:81%;
   position:absolute;
   margin:auto;
   top:0;
   bottom:0;
   left:0;
   right:0;
   background-color:Chartreuse;
}

img {
   max-width:100%;
   max-height:100%;
   position:absolute;
   margin:auto;
   top:0;
   bottom:0;
   left:0;
   right:0;
}
</style> 
 </head> 
 <body> 
  <div class="container"> 
   <!-- this is a landscape image--> 
   <img src="https://www.java2s.com/style/demo/Safari.png"> 
   <!--or use this portrait image
    <img src="https://www.java2s.com/style/demo/Opera.png"/>
    --> 
  </div>  
 </body>
</html>

Related Tutorials