CODEWITHSUNDEEP
htmlcss
Si8
Si8

Reputation: 9225

Why doesn't image fit the table cell

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>

Upvotes: 2

Views: 3598

Answers (4)

Hashem Qolami
Hashem Qolami

Reputation: 99484

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>.

Upvotes: 5

SW4
SW4

Reputation: 71150

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>

Upvotes: 1

Dadou
Dadou

Reputation: 1008

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.

Upvotes: 2

apohl
apohl

Reputation: 1923

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

Upvotes: 1

Related Questions