css - 强制 img 元素填充容器的高度和宽度

Question

我有我目前正在构建的这个画廊，我正在尝试弄清楚如何让我的图像填充它们的容器。

我不介意它们是否被裁剪了一点，我只是希望它们填满其父元素 .thumb 的整个高度和宽度。

我的 HTML 看起来像这样:

<ul class="thumbs">
   <li class="thumb">
   <a href="#"><img src="/img.jpg"></a>
   </li>
   ...
</ul>

我的 CSS 是这样的:

.thumbs .thumb {
  background: red;
  height: 33.5294118%;
  float: left;
  width: 50%;
  overflow: hidden;
  z-index: 0;
}

我在这里设置了一个演示:http://codepen.io/realph/pen/hjvBG

如果有人能指出正确的方向，我将不胜感激。

提前致谢!

Answer 1

尝试将 .thumb a 添加到您的 .thumb img 定义中(因此 a 元素的宽度也是 100%)- 您可能还必须使一个或两个 (a/img) 标签显示: block 和高度 100% as嗯