力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）標籤：塊和高度100％以及

Answer 2

你可以嘗試添加一個類來img元素，如：

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

和CSS。

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