如何与background-size：cover一样调整图像大小/裁剪图像？

Question

我正在使用bootstrap 3构建一个响应式站点，并且我需要一个照相馆。 客户端希望自己更新图库。

我的问题是它们上传的图像可以是任何大小和任何比例。我如何使图像适合特定的大小div？

要求（必须与background-size：cover相似）：

-图片必须保持原始比例（可以裁剪以适合div）

-图片必须拉伸/缩小以适合FULL div（无空格）

-图像必须在div中垂直和水平居中

我知道我可以做这样的事情，但我需要它像“ background-size：cover”那样工作：

.myImages {
height:300px;
width:300px;
overflow:hidden;
}    

http://jsfiddle.net/w4xTN/1/

例：

您可以在下面的链接中看到我对“功能属性”照片使用了“ background-image：cover”。我需要对普通图像执行类似的操作（除非有人知道支持“ background-image：cover” image：cover“图片？）：

http://new.amberlee.com.au/for-sale/browse-for-sales

注意：可以使用JQuery / Javasript并在上载时调整它们的大小不是一种选择;）

Answer 1

您已将标签放入.myImages中，因此需要为标签添加属性，因此：

.myImages > img {
    height: 100%;
    width: 100%;
}

如果要使img居中，只需将height或width属性更改为“ auto”即可；

您还可以修改img标签使其垂直居中，从而通过播放垂直边距来裁剪图像：例如

 margin-top: -33%;

http://jsfiddle.net/denistsoi/rLmxL/1/

Answer 2

不 ，您不能像background-size:cover那样得到它。

这种方法非常接近：它使用javascript确定图像是长还是高，并相应地应用样式。

JS

    $('.myImages img').load(function () {
    var height = $(this).height();
    var width = $(this).width();
    console.log('widthandheight:', width, height);
    if (width > height) {
        $(this).addClass('wide-img');
    }
    else {
        $(this).addClass('tall-img');
    }
});

的CSS

.tall-img{
    margin-top:-50%;
    width:100%;
}
.wide-img{
    margin-left:-50%;
    height:100%;
}

http://jsfiddle.net/b3PbT/

编辑：这是您最后一个问题的无耻转发；）