html - 为什么图像不适合表格单元格

Question

我想知道为什么图像没有拉伸(stretch)整个表格单元格？

代码如下:

<td width="110" height="100" style="margin: 0; padding: 0; border: 1px solid rgb(0, 174, 239); background-color: #00FF00">
    <a target="_blank" href="http://mymed.com/provider.aspx?id=2611" xt="SPCLICKSTREAM" name="Kamin_1"><img style="width: 100%; height: 100%; display: inline-block;" alt="s, kam, MD" border=0 src="http://mymed.com/images/email/Physicians/Kaminski.jpg" name="Cont_19" /></a>
</td>

Answer 1

因为 width 的百分比值和 height与包含 block 尺寸有关， anchor 标记(容器)没有任何明确的宽度/高度。

您需要将 anchor 标记显示为 block然后应用然后将其宽度/高度设置为 100%

a {
    display: block;
    width: 100%;
    height: 100%;
}

此外，还有 a gap below the image因为默认情况下图像在其基线中垂直对齐。为了解决这个问题，您应该按如下方式对齐图像:

img { vertical-align: bottom; }

另请注意 margin is not applicable to table cells ;所以你可以删除无用的 margin: 0;来自 <td> 的内联样式.