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

Question

我有这个我正在建设的画廊，我正在努力研究如何让我的图像填满他们的容器。

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

我的HMTL看起来像这样：

<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和height 100％as井

Answer 2

您可以尝试向img元素添加一个类，例如：

<img src="/img.jpg" class="img-class">

和css。

  

.img-class {width：100％;身高：100％; }