Making images respond to browser resize with both width and height - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Image

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

Description

Making images respond to browser resize with both width and height

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Lorem ipsu</title> 
  <meta name="viewport" content="width=device-width"> 
  <link href="https://fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css"> 
  <style>
.object-fit_fill {
   -o-object-fit:fill;
   object-fit:fill;
}

.object-fit_contain {
   -o-object-fit:contain;
   object-fit:contain;
}

.object-fit_cover {
   -o-object-fit:cover;
   object-fit:cover;
}

.object-fit_none {
   -o-object-fit:none;
   object-fit:none;
}

.object-fit_scale-down {
   -o-object-fit:scale-down;
   object-fit:scale-down;
}

html {<!-- ww w .  ja va 2 s .c  o  m-->
   color:Chartreuse;
   padding:31px;
   font-family:'Source Code Pro', Monaco;
   background-color:yellow;
}

p {
   font-weight:201;
   font-size:14px;
   margin-bottom:11px;
   margin-top:0;
}

img {
   height:121px;
   background-color:blue;
}

img[class] {
   width:100%;
}

.original-image {
   margin-bottom:51px;
}

.image {
   float:left;
   width:41%;
   margin:0 31px 21px 0;
}

.image:nth-child(2n) {
   clear:left;
}

.image:nth-child(2n+1) {
   margin-right:0;
}
</style> 
 </head> 
 <body translate="no"> 
  <div class="original-image"> 
   <p>Lorem ipsum do</p> 
   <img src="https://www.java2s.com/style/demo/InternetExplorer.png"> 
  </div> 
  <div class="image"> 
   <p>Lorem ipsum dolo</p> 
   <img class="object-fit_fill" src="https://www.java2s.com/style/demo/Firefox.png"> 
  </div> 
  <div class="image"> 
   <p>Lorem ipsum dolor s</p> 
   <img class="object-fit_contain" src="https://www.java2s.com/style/demo/Safari.png"> 
  </div> 
  <div class="image"> 
   <p>Lorem ipsum dolor</p> 
   <img class="object-fit_cover" src="https://www.java2s.com/style/demo/Safari.png"> 
  </div> 
  <div class="image"> 
   <p>Lorem ipsum dolo</p> 
   <img class="object-fit_none" src="https://www.java2s.com/style/demo/Safari.png"> 
  </div> 
  <div class="image"> 
   <p>Lorem ipsum dolor sit </p> 
   <img class="object-fit_scale-down" src="https://www.java2s.com/style/demo/Safari.png"> 
  </div>  
 </body>
</html>

Related Tutorials