0

我有一组简单的 HTML 来创建图像列表（JSFiddle）：

<ul>
  <li>
    <img src="//cloudinary-a.akamaihd.net/forwardfour/image/upload/h_300,w_200,c_pad,e_vibrance:100/pgznasls8cnqg3vlla7t.jpg" />

    <div class="container">
      <h3 class="title">The Landscape of History</h3>
    </div>
  </li>
</ul>

但是，如果您查看 JSFiddle 的附加链接，您会注意到图像下方有大约 5px 的额外空间。你知道它为什么这样做以及我能做些什么来删除额外的空间吗？

感谢您的时间。

4

2 回答 2

1

空间是图像的一部分；解决这个问题的唯一方法是裁剪它。

（好吧，你可以使用clip: rect(). 但这不是一个很好的处理方式。）

于 2013-07-10T01:29:26.623 回答
0

您的图像在其底部边缘有一个 5 像素（ish）的空白区域。将背景更改<body>为黑色，您会看到它。

您必须裁剪源，或将图像用作具有明确高度且没有溢出的背景图像。

或者，您可以在其他三个边缘周围放置一个 5px 的边框，并将其变成设计的一部分。:)

问题当然是其他源图像（如果这是目录类型的东西）可能没有 5px 边框，所以最好的解决方案是编辑源，如果可以的话。

于 2013-07-10T01:31:01.977 回答