为什么我的图像在我的桌子上扭曲了？

Question

以下是有问题的页面的链接： http ： //sites.udel.edu/materials-characterization/ 。

如您所见，1行6列表中的图像正在被严重扭曲。 编码表和他们的css我很糟糕，似乎无法工作，因此图像显示为120px 120px。 我确信这是一件简单而明显的事情，但我一直无法做到这一点。 我已经尝试在我的CSS中设置这些设置：

td {
  padding:0px;
  width:16.6%;
  margin:0px;}

无济于事。

这是表格的html：

<table>
  <tr>
    <td><img style="height: 120px;" src="http://imageshack.com/a/img661/7633/1iiqa5.png" alt="" /></td>
    <td><img style="height: 120px;" src="http://imageshack.com/a/img905/7443/rsWUcI.png" alt="" /></td>
    <td><img style="height: 120px;" src="http://imageshack.com/a/img537/6786/ISbtBn.png" alt="" /></td>
    <td><img style="height: 120px;" src="http://imageshack.com/a/img912/2283/wjNYwR.png" alt="" /></td>
    <td><img style="height: 120px;" src="http://imageshack.com/a/img673/7112/0wOLLR.png" alt="" /></td>
    <td><img style="height: 120px;width:120px;" src="http://imageshack.com/a/img661/8118/qKGYlR.png" alt="" /></td>
  </tr>
</table>

提前感谢您给我的任何建议！

Answer 1

删除#content img{max-width:100%} 。 您正在为倾斜图像比率的所有图像指定高度。

Answer 2

我转而采用响应式方法。 删除标签上的style属性并将其添加到css：

td img {
   max-width: 100%;
   height: auto;
   }

这样，图像可能会缩放，但不应该失真。

Answer 3

你设置padding: 6px 24px; 在style.css的第743行，它覆盖padding: 0; 在问题中宣布。