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

我转而采用响应式方法。删除代码上的样式属性，并将其添加到css：

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

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

Answer 3

您在style.css的第743行设置padding: 6px 24px;，覆盖问题中声明的padding: 0;。

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

3 个答案: