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

【问题标题】：Why doesn't image fit the table cell为什么图像不适合表格单元格
【发布时间】：2014-02-28 04:35:01
【问题描述】：

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

代码如下：

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

【问题讨论】：

标签： html css

【解决方案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;所以你可以从<td> 中删除无用的margin: 0; 内联样式。

【讨论】：

由于某种原因不适合我... TD 现在超出了高度：/
@SiKni8 我没有对<td> 元素做任何事情。你能提供一个在线演示吗？
@SiKni8 啊..我以为你想拉伸图像以填充单元格的整个垂直空间。
我做了，只是忘记添加 TD 的其余部分。懒惰使我付出了代价并延迟了解决方案大声笑
@SiKni8 问题可能来自vertical-align: botom;，因为它应该是vertical-align: bottom;（带有两个t）。

【解决方案2】：

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

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

虽然这可能是世界，但我真的不认为这是理想的，因为如果图像的大小与您的 td 不完全相同，它可能会拉伸图像。

【讨论】：

@Pubil Design 在这里回答的每个人都是绝对正确的。问题是文本超出了表格，导致图像有空白：/ SILLY ME!!!

【解决方案3】：

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

【讨论】：

【解决方案4】：

为什么不这样做：

<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 相同的高度和宽度，并将图像作为背景。

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

例如

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>

【讨论】：

百分比值是指包含块的width/height。不是元素本身。
@SW4 在这里回答的每个人都是绝对正确的。问题是文本超出了表格，导致图像有空白：/ SILLY ME!!!