Fixing the container width and height and making image responsive to the container - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Responsive Layout

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

Description

Fixing the container width and height and making image responsive to the container

Demo Code

ResultView the demo in separate window 

<html lang="de" style="height: 100%">
 <head> 
  <meta charset="utf-8"> 
  <title>Lorem ip</title> 
 </head> <!--from w  w w. ja  va  2  s . c  o  m-->
 <body style="height: 100%"> 
  <div style="border: 1px solid red; margin: auto auto; width: 90%; height: 90%; overflow: hidden;"> 
   <img style="display: block; max-width: 100%; max-height: 100%; " src="https://www.java2s.com/style/demo/Safari.png" alt=""> 
  </div>  
 </body>
</html>

Related Tutorials