CSS responsive div, when height is set in pixels - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Responsive Layout

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

Description

CSS responsive div, when height is set in pixels

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<!--from w w w. j a v a  2s . com-->
 {
   width:100%;
   border:11px solid Chartreuse;
   position:relative;
   box-sizing:border-box;
}

.container:before {
   content:"";
   display:block;
   padding-top:63.6%;
}

.inner
 {
   width:100%;
   height:100%;
   background:url('https://www.java2s.com/style/demo/Google-Chrome.png') no-repeat;
   -webkit-background-size:100%;
   -moz-background-size:100%;
   -o-background-size:100%;
   background-size:100%;
   text-align:center;
   font-size:41px;
   color:yellow;
   position:absolute;
   top:0;
   left:0;
}
</style> 
 </head> 
 <body> 
  <div class="container"> 
   <div class="content"> 
    <div class="inner">
      Lorem ipsum d 
     <br>Lorem ipsum dolor s 
    </div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials