让图像完全填充div，而不会拉伸

30 浏览
0 Comments

让图像完全填充div，而不会拉伸

我有一些尺寸不同的大图像，需要完全填充240px x 300px的容器，无论是在宽度还是高度上。这是我目前的情况，但只适用于一个维度：

http://jsfiddle.net/HsE6H/

HTML

CSS

.container {
height: 300px;
width: 240px;
background-color: red;
float: left;
overflow: hidden;
margin: 20px;
}
img {
max-width: 100%;
height: auto;
}

比例应保持不变。基本上，宽图像应在宽度上被裁剪，而高图像则需要在高度上被裁剪。所以只需根据需要放大以填满容器。

不确定为什么无法使其工作，我需要使用JavaScript吗？

编辑：明确一下。我需要在fiddle上去掉所有红色的东西。进来的图像是动态的，因此我不能使用背景图像。我可以使用JavaScript。谢谢！ 🙂

0