具有图像html的表单元格中的额外空间

Question

我已经在堆栈溢出和其他网站上做了大量的搜索，还没有找到一个对我有用的解决方案。为了更清楚地看到这个问题，我附上了网页的截图。如果有人在我的代码中没有尝试过任何提示或技巧，那么请让我知道！我已经尝试了所有的想法，从以前非常相似的职位，但出于某种原因，他们都没有为我工作。提前谢谢。

​

​

HTML：

<table>
  <tr>
    <td><img border="0" alt="java" src="websitePics/med_high.png" width="568.5" height="296.5"></td>
    <td><img border="0" alt="python" src="websitePics/med_high.png" width="568.5" height="296.5"></td>
    <td><img border="0" alt="htmlcss" src="websitePics/med_high.png" width="568.5" height="296.5"></td>
  </tr>
<tr>
    <td>text box describing level for java</td>
    <td>text box describing level for python</td>
    <td>text box describing level for html/css</td>
</tr>
</table> 

CSS：

table {
    border-collapse: collapse;
    border-spacing: 0px;
}
td {
    border: none;
    margin: 0;
    padding: 0;
    line-height: 0;
    display: block;
    font-size: 0;

img {
    vertical-align: top;
    border: none;
    margin: 0;
    padding: 0;
    font-size:0;
    display: block;
}

Answer 1

您已经将.png图像的with定义为568.5像素，这意味着表的宽度将大约为1704px宽，这可能比页面模板的宽度还要宽。

您希望图像缩放以适应表格单元格的宽度。

您可以这样做，将宽度设置为td (33%)，然后将图像缩放到100%的宽度。

注意:我构建了一个灵活的/响应性的布局，我认为这可能是您所需要的。

​

table {
  border-collapse: collapse;
  border-spacing: 0px;
  width: 100%;
  border: 1px solid blue;
}
td {
  border: none;
  padding: 0;
  width: 33%;
}
img {
  display: block;
  width: 100%;
}
tr.labels td {
  background-color: beige; /* for demo only */
  text-align: center;
  padding: 20px 0;
}
tr.images td {
  padding: 5px; /* for demo if so needed */
}

<table>
  <tr class="images">
    <td>
      <img border="0" alt="java" src="http://placehold.it/568x296">
    </td>
    <td>
      <img border="0" alt="python" src="http://placehold.it/568x296">
    </td>
    <td>
      <img border="0" alt="htmlcss" src="http://placehold.it/568x296">
    </td>
  </tr>
  <tr class="labels">
    <td>text box describing level for java</td>
    <td>text box describing level for python</td>
    <td>text box describing level for html/css</td>
  </tr>
</table>

​

Answer 2

CSS中的填充已经设置为0，表格单元格不受边距的影响，因此这不是问题。表格单元格扩展到其内容的大小。您的图像是每个568.5px296.5px。为了摆脱这个额外的空间，缩小标记中图像的大小，或者将它们裁剪到您选择的图像编辑器中。