将具有不同大小的图像拟合到相同类别的div中，div的数量等于总图像数量

Question

我有一个主容器div，称为“容器”，它包含子div，称为“img-container”，其中使用了image标签。

假设我总共有4个不同大小的图像。现在我希望这些图像适合“img-container”。

现在是什么：

应该是什么：

同时，它应该是响应性的。

谢谢

Answer 1

试试这个

<div id="img-container" >
    <img style="max-width: 100%; max-height: 100%;" src="yourimg">
</div>

Answer 2

只需将宽度和高度100％放到img，然后将固定的宽度和高度设置为div。 HTML：

<div class="fill">    
    <img src="http://1.bp.blogspot.com/-zzcv3yDERgc/VSbJnz5KdQI/AAAAAAAAHQk/BL7sjHGK5sc/s1600/test.jpg">    
</div>

CSS：

div.fill {
    width:100px; height:100px;
}
div.fill img {    
    max-width:100%;
    max-height:100%;
}

http://jsfiddle.net/Rx37G/48/