小编Len*_*art的帖子

我有各种尺寸的大图像,需要在两个维度上完全填充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.谢谢!:)

我正在尝试让div在点击时获得一个新类(使其扩展),并在单击该div内的取消链接时将其返回到旧类(使其关闭).

<div class="new-discussion small">
    <a class="cancel">Cancel</a>
</div>

<script>
    $('.new-discussion.small').click(function() {
        $(this).addClass("expand").removeClass("small");
    });
    $('a.cancel').click(function() {
        $('.new-discussion.expand').addClass("small").removeClass("expand");
    });
</script>

现在,添加扩展类可以完美地工作,但是在单击取消链接后关闭面板只有在我删除此代码时才有效:

$('.new-discussion.small').click(function() {
    $(this).addClass("expand").removeClass("small");
});

所以我想这必须阻止第二个功能工作,但我真的无法弄清楚为什么.

有任何想法吗？谢谢!