Make Flexbox image scale to height and keep aspect ratio - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex Height

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Flex Height

Description

Make Flexbox image scale to height and keep aspect ratio

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">
body, html {
   height:100%;
   margin:0;
   padding:0;
   overflow:hidden;
   position:relative;
}

.container {<!--from  www.j  ava 2  s  . c om-->
   width:100%;
   max-width:100%;
   height:100%;
   max-height:100%;
}

.box {
   background:yellow;
   width:100%;
   padding:0 6%;
   box-sizing:border-box;
   max-width:100%;
   height:100%;
   max-height:100%;
   position:relative;
}

.box img {
   height:auto;
   height:100%;
   max-height:100%;
   width:auto;
   max-width:100%;
   margin:auto;
   position:absolute;
   top:0%;
   bottom:0%;
   left:0%;
   right:0%;
   display:block;
   object-fit:contain;
}
</style> 
 </head> 
 <body> 
  <div class="container"> 
   <div class="box"> 
    <img src="https://www.java2s.com/style/demo/Google-Chrome.png"> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials