Image responsiveness usage - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Responsive Layout

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

Description

Image responsiveness usage

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <style>
#editedWidth {<!--from   w ww  .j  ava 2s. com-->
   max-width:100%;
   width:auto;
   height:301px;
}

#editedHeight {
   max-width:100%;
   width:301px;
   height:auto;
}

span {
   display:block;
   position:relative;
   top:-51px;
   color:Chartreuse;
}
</style> 
 </head> 
 <body translate="no"> 
  <img src="https://www.java2s.com/style/demo/Safari.png" id="original"> 
  <img src="https://www.java2s.com/style/demo/Opera.png" id="editedWidth"> 
  <span>Lorem ipsum </span> 
  <img src="https://www.java2s.com/style/demo/Firefox.png" id="editedHeight"> 
  <span>Lorem ipsum d</span>  
 </body>
</html>

Related Tutorials