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

Question

我想知道为什么图像不能拉伸整个表格单元格？

以下是代码：

<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然后应用，然后将其宽度/高度设置为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>内联样式。

Answer 2

为了确保它涵盖整个区域，我会删除width:100%;height:100%并将其添加到我的CSS中：

td { position: relative; }
td img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }

虽然这可能是世界性的，但我真的不认为这是理想的，因为它可能会拉伸图像，如果它们不是td的确切大小。

Answer 3

为什么不这样做：

<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" style='width:100%;height:100%;background-image:url(http://mymed.com/images/email/Physicians/Kaminski.jpg);display:block;'></a>
</td>

这会将a元素设置为display:block，并为其提供与父级td相同的高度和宽度，并将图像作为其背景。

在制作中，您还应该考虑将样式设置为样式表而不是内联样式。

e.g。

td.bios{
  height:100px;
  width:100px;
  margin:0;
  padding:0;
  border: 1px solid rgb(0, 174, 239);
  background-color: #00FF00;
}

td.bios a.imgLink{
  width:100%;
  height:100%;
  display:block;
}

<td class='bios'>
    <a target="_blank" href="http://mymed.com/provider.aspx?id=2611" xt="SPCLICKSTREAM" name="Kamin_1" style='background-image:url(http://mymed.com/images/email/Physicians/Kaminski.jpg)' class='imgLink'></a>
</td>

Answer 4

保持图像的比例。填充整个单元格意味着拉伸图像。