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 :
<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 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.
This question is related to
html
The answer is
Use your developer's tool of choice and check if the tr, td or img has any padding or margins.
It's all about display: block :)
Updated:
Ok so you have the table, tr and td tags:
<table>
<tr>
<td>
<!-- your image goes here -->
</td>
</tr>
</table>
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;
}
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:
<img align="center" width="100%" height="100%" src="http://dummyimage.com/68x68/000/fff" />
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.
Source: Stackoverflow.com