使图像完全填充div而无需拉伸

Question

我有不同尺寸的大图像，需要在两个尺寸中完全填充240px x 300px的容器。这是我现在得到的，仅适用于一维：

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。谢谢！:)

Answer 1

自动调整图像大小以适应Div-使CSS正常工作

这是一种方法，从以下HTML开始：

<div class="container portrait">
    <h4>Portrait Style</h4>
    <img src="http://placekitten.com/150/300">
</div>

和CSS：

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

.portrait img {
    width: 100%;
}
.landscape img {
    height: 100%;
}

当您将图像定向为人像时，需要将宽度缩放到100％。相反，当图像为横向时，您需要缩放高度。

不幸的是，CSS中没有针对图像长宽比的选择器组合，因此您不能使用CSS来选择正确的缩放比例。

另外，由于图像的左上角固定在包含块的左上角，因此您没有简单的方法来使图像居中。

jQuery助手

您可以使用以下jQuery操作来根据图像的纵横比确定要设置的类。

$(".container").each(function(){
    // Uncomment the following if you need to make this dynamic
    //var refH = $(this).height();
    //var refW = $(this).width();
    //var refRatio = refW/refH;

    // Hard coded value...
    var refRatio = 240/300;

    var imgH = $(this).children("img").height();
    var imgW = $(this).children("img").width();

    if ( (imgW/imgH) < refRatio ) { 
        $(this).addClass("portrait");
    } else {
        $(this).addClass("landscape");
    }
})

对于中的每个图像.container，获取其高度和宽度，进行测试width<height，然后设置适当的类。

另外，我添加了一个检查，以考虑到包含块的长宽比。以前，我隐式地假定了正方形视图面板。