2

enter image description here

I am wondering why the image doesn't stretch the entire table cell?

Here is the code:

<td width="110" height="100" style="margin: 0; padding: 0; border: 1px solid rgb(0, 174, 239); background-color: #00FF00">
    <a target="_blank" href="http://mymed.com/provider.aspx?id=2611" xt="SPCLICKSTREAM" name="Kamin_1"><img style="width: 100%; height: 100%; display: inline-block;" alt="s, kam, MD" border=0 src="http://mymed.com/images/email/Physicians/Kaminski.jpg" name="Cont_19" /></a>
</td>
Si8
  • 9,141
  • 22
  • 109
  • 221

4 Answers4

5

Because the percentage value for width and height is related to containing block dimensions, and the anchor tag (the container) doesn't have any explicit width/height.

You'd need to display the anchor tag as block then apply then set its width/height to 100% as well.

a {
    display: block;
    width: 100%;
    height: 100%;
}

Also, there would be a gap below the image because the image is aligned vertically in its baseline by default. In order to fix that you should align the image as follows:

img { vertical-align: bottom; }

Also note that margin is not applicable to table cells; So you could remove the useless margin: 0; inline style from <td>.

Community
  • 1
  • 1
Hashem Qolami
  • 97,268
  • 26
  • 150
  • 164
  • Not working for me for some reason... The TD stretches over height now :/ – Si8 Feb 27 '14 at 17:30
  • @SiKni8 I didn't do anything to the `` elements. Could you provide an online demo? – Hashem Qolami Feb 27 '14 at 17:34
  • As you can see at the demo, the `td` has a height of `100px`. – Hashem Qolami Feb 27 '14 at 17:52
  • @HashemQolami Everyone who answered here are absolutely correct. The issue was the text was extending beyond the table which caused the image to have the white space :/ SILLY ME!!! – Si8 Feb 27 '14 at 17:54
  • 1
    @SiKni8 Ah.. I thought you want to stretch the image to fill the entire vertical space of the cell. – Hashem Qolami Feb 27 '14 at 17:56
  • 1
    I did, just forgot to add the rest of the TD. Laziness made me pay and delayed the solution lol – Si8 Feb 27 '14 at 17:59
  • 1
    @SiKni8 problem may have come from `vertical-align: botom;` as it should read `vertical-align: bottom;` (with two t's). – davewoodhall Feb 27 '14 at 19:43
  • @PubliDesign Ah I missed that while I was typing the answer. BTW the fiddle is correct :) – Hashem Qolami Feb 27 '14 at 20:34
  • @HashemQolami No worries, just thought this was why it didn't work for SiKni8. Also, I see you updated your post, smart move, especially that you've got the accepted answer. – davewoodhall Feb 27 '14 at 21:48
2

To ensure it covers the whole area, I would remove the width:100%;height:100% and add this to my CSS:

td { position: relative; }
td img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }

Although this could world, I really don't think this is ideal since it could stretch images if they aren't the exact size of your td.

davewoodhall
  • 998
  • 3
  • 18
  • 43
  • @Pubil Design Everyone who answered here are absolutely correct. The issue was the text was extending beyond the table which caused the image to have the white space :/ SILLY ME!!! – Si8 Feb 27 '14 at 17:54
1

Why not do:

<td width="110" height="100" style="margin: 0; padding: 0; border: 1px solid rgb(0, 174, 239); background-color: #00FF00;">
    <a target="_blank" href="http://mymed.com/provider.aspx?id=2611" xt="SPCLICKSTREAM" name="Kamin_1" style='width:100%;height:100%;background-image:url(http://mymed.com/images/email/Physicians/Kaminski.jpg);display:block;'></a>
</td>

This sets the a element to display:block and gives it the same height and width of the parent td with the image as its background.

In production, you should also look at setting your styles into a stylesheet as opposed to being inline.

e.g.

td.bios{
  height:100px;
  width:100px;
  margin:0;
  padding:0;
  border: 1px solid rgb(0, 174, 239);
  background-color: #00FF00;
}

td.bios a.imgLink{
  width:100%;
  height:100%;
  display:block;
}

<td class='bios'>
    <a target="_blank" href="http://mymed.com/provider.aspx?id=2611" xt="SPCLICKSTREAM" name="Kamin_1" style='background-image:url(http://mymed.com/images/email/Physicians/Kaminski.jpg)' class='imgLink'></a>
</td>
SW4
  • 69,876
  • 20
  • 132
  • 137
  • Percentage values refer to the [width](https://developer.mozilla.org/en/docs/Web/CSS/width)/[height](https://developer.mozilla.org/en/docs/Web/CSS/height) of the containing block. Not the element itself. – Hashem Qolami Feb 27 '14 at 16:54
  • @SW4 Everyone who answered here are absolutely correct. The issue was the text was extending beyond the table which caused the image to have the white space :/ SILLY ME!!! – Si8 Feb 27 '14 at 17:54
1

It's keeping the images' proportions. To fill the entire cell would mean stretching the images.

apohl
  • 1,913
  • 27
  • 30