make images fill table cells while keeping aspect ratio - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Table Cell

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Table Cell

Description

make images fill table cells while keeping aspect ratio

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <title>Lorem </title> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
table {<!-- w  w w.j  a  v  a 2  s  .c  om-->
   width:100%;
}

td {
   max-height:201px;
   overflow:hidden;
   background-image:url('https://www.java2s.com/style/demo/Google-Chrome.png');
   background-size:cover;
   background-position:center;
}

img {
   width:100%;
   height:auto;
   display:block;
}
</style> 
 </head> 
 <body> 
  <table> 
   <tbody> 
    <tr> 
     <td>Lore</td> 
     <td>Lore</td> 
     <td>Lore</td> 
    </tr> 
    <tr> 
     <td>Lore</td> 
     <td>Lore</td> 
     <td>Lore</td> 
    </tr> 
   </tbody> 
  </table>  
 </body>
</html>

Related Tutorials