Fit image to table cell Pure HTML

Question

How do i fit image to table td cell   Pure HTML   I have tried below code to fit an image in table td cell    HTML code is here     lt table border  1  bordercolor   aaa  cellspacing  0  cellpadding  0  gt   lt tr gt       lt td gt  lt img width  100   height  100   src  http   dummyimage com 68x68 000 fff    gt  lt  td gt   lt  tr gt   lt  table gt    As you can see in following screenshot and in JsFiddle DEMO  that image doesn t fit to td cell   Shot      What am i doing wrong    Any suggestion would be awesome

User · Accepted Answer

Inline content leaves space at the bottom for characters that descend (j, y, q):

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

There are a couple 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" />

User · Answer

Use your developer s tool of choice and check if the tr  td or img has any padding or margins

User · Answer

It s all about display  block     Updated   Ok so you have the table  tr and td tags    lt table gt     lt tr gt       lt td gt         lt  -- your image goes here -- gt       lt  td gt     lt  tr gt   lt  table gt    Lets say your table or td  whatever define your width  has property width  360px   Now  when you try to replace the html comment with the actual image and set that image property for example width  100   which should fully fill out the td cell you will face the problem   The problem is that your table cell  td  isn t properly filled with the image  You ll notice the space at the bottom of the cell which your image doesn t cover  it s like 5px of padding    How to solve this in a simpliest way   You are working with the tables  right  You just need to add the display property to your image so that it has the following   img     width  100     display  block

User · Answer

if you want to do it with pure HTML solution  you can delete the border in the table if you want   or you can add align  center  attribute to your img tag like this    lt img align  center  width  100   height  100   src  http   dummyimage com 68x68 000 fff    gt    see the fiddle   http   jsfiddle net Lk2Rh 27   but still it better to handling this with CSS  i suggest you that    I hope this help

[html] Fit image to table cell [Pure HTML]

Examples related to html