相关疑难解决方法(0)

我有各种尺寸的大图像,需要在两个维度上完全填充240px的300px容器.这是我现在得到的,只适用于一个方面:

http://jsfiddle.net/HsE6H/

HTML

<div class="container">
    <img src="http://placehold.it/300x1500">
</div>
<div class="container">
    <img src="http://placehold.it/1500x300">
</div

CSS

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

img {
max-width: 100%;
height: auto;
}

比例应该保持不变.基本上,应该在宽度上切除宽图像,而在高度上需要切断高图像.因此,只需放大填充容器所需的数量即可.

不知道为什么我不能让它工作,我需要JavaScript吗？

编辑:要清楚.在小提琴上我需要一切红色.进来的图像是动态的,因此我无法使用背景图像.我愿意使用JavaScript.谢谢!:)