我如何使图像适合表格td单元格? [纯
HTML]
我尝试了下面的代码来适应表td单元格中的图像.
HTML代码在这里:
<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>
正如您在下面的屏幕截图和JsFiddle DEMO中看到的那样,该图像不适合td单元格.
射击:
我究竟做错了什么 ?
任何建议都会很棒.
解决方法
内联内容在底部为下降(j,y,q)的字符留出空间:
https://developer.mozilla.org/en-US/docs/Images,_and_Mysterious_Gaps
有几个修复:
使用display:block;
<img style="display:block;" width="100%" height="100%" src="http://dummyimage.com/68x68/000/fff" />
或使用vertical-align:bottom;
<img style="vertical-align: bottom;" width="100%" height="100%" src="http://dummyimage.com/68x68/000/fff" />