Geek Answers Handbook

Fit image to table cell [Pure HTML]

How to place image in td table? [Pure HTML]

I tried using the code below to match the image in the td table.

HTML code is here:

 <table border="1" bordercolor="#aaa" cellspacing="0" cellpadding="0"> <tr> <td><img width="100%" height="100%" src="http://dummyimage.com/68x68/000/fff" /></td> </tr> </table>

As you can see in the following screenshot and in JsFiddle DEMO , this image is not suitable for td cell.

Shot:

enter image description here

What am I doing wrong?

Any suggestion would be awesome.

+5
source share
4 answers

The inner content leaves space below for characters that come down (j, y, q):

https://developer.mozilla.org/en-US/docs/Images,_Tables,_and_Mysterious_Gaps

There are a couple of fixes:

Use display: block;

 <img style="display:block;" width="100%" height="100%" src="http://dummyimage.com/68x68/000/fff" />

or use vertical-align: bottom;

 <img style="vertical-align: bottom;" width="100%" height="100%" src="http://dummyimage.com/68x68/000/fff" />
+5
source

All about display: block :)

Update

So you have the table, tr and td tags:

 <table> <tr> <td> <!-- your image goes here --> </td> </tr> </table>

Suppose your table or td (regardless of your width) has the width: 360px; property width: 360px; . Now, when you try to replace the html comment with the actual image and set this image property, for example width: 100%; which should fill the td cell completely, you will run into this problem.

Problem lies in the fact that your table cell ( td ) is incorrectly populated with an image. You will notice a place at the bottom of the cell that your image does not cover (it looks like 5px indentation).

How to solve this in the easiest way?

You work with tables, right? You just need to add the display property to your image so that it has the following:

 img { width: 100%; display: block; }
+1
source

Use your developer tool as you see fit and check if tr , td or img any add-ons or fields.

0
source

if you want to do this with a pure HTML solution, you can remove the border in the table if you want ... or you can add the align = "center" attribute to your img tag as follows:

 <img align="center" width="100%" height="100%" src="http://dummyimage.com/68x68/000/fff" />

see script: http://jsfiddle.net/Lk2Rh/27/

but it's better to handle this with CSS, I suggest you this.

  • I hope this help.
0
source

More articles:


All Articles