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

User · 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    lt img style  display block   width  100   height  100   src  http   dummyimage com 68x68 000 fff    gt    or use vertical-align  bottom    lt img style  vertical-align  bottom   width  100   height  100   src  http   dummyimage com 68x68 000 fff    gt

User · Answer

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

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

Examples related to html