html - 如何将不同大小的图像放入 100x100px div 中，而不会弄乱宽高比。 ( overflow hidden )

Question

这是一个 JSFiddle 来展示我的意思:http://jsfiddle.net/p4toy2qq/ 。 代码在这里:

HTML

<div class="container">
     <img src="image-of-any-size.jpg" alt="alt" />
</div>

CSS

.container { width: 100px; height: 100px; overflow: hidden; border: black solid 1px; margin: 10px;}
.container img { width: 100%; }

我基本上想要不同大小的图像来填充 div，而不会弄乱宽高比。溢出应该被隐藏，这样外面的部分就会被“裁剪”掉。

有什么想法吗？

Answer 1

如果您可以选择将它们设置为背景图像，您可以使用:

.container{
    background: url('something.jpg');
    background-size:cover;
    background-position:center center;
}

请注意，某些较旧的浏览器不支持background-size:http://caniuse.com/#search=background-size