Question

I have an image with height/width 100% inside a table.
I define the table size, but it doesn’t work until I define the TD size as well.
How can I make the TD to inherit the table size so that I don’t have to duplicate the size in CSS?

http://jsfiddle.net/CgEhg/

Answer 1

.g {
  width:40px;
  height:40px;
}

img {
  height:inherit;
  width:inherit;
}

td, tr, tbody {
  height:inherit;
  width:inherit;
}

<table class="g" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><img src="http://www.google.com/logos/2012/stgeorge12-hp.png"></td>
  </tr>
</table>

<div class="g"><img src="http://www.google.com/logos/2012/stgeorge12-hp.png"></div>