Question

我正在使用bootstrap 3＆amp;我需要一个照片库。客户想要自己更新图库..

我的问题是他们上传的图片可以是任意大小的图片。任何比例..如何使图像适合一定大小的div？

要求（必须与背景大小相同：封面）：

-images必须保持原始比例（可以裁剪以适应div）

-images必须拉伸/收缩以适合FULL div（无空格）

- 图像必须垂直居中＆amp;在div中水平地

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

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

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

示例：

你可以在下面的链接中看到我使用“background-image：cover”作为“特色属性”照片。我需要为普通图像做类似的事情（除非有人知道会支持的图片库图像的“背景图像：封面”？）：

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

注意：JQuery / Javasript可以使用＆amp;在上传时调整大小不是一个选项;）

Answer 1

您已在.myImages中添加了标记，因此您需要为标记添加属性：

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

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

你也可以将img标签破解为垂直居中，通过播放垂直边距裁剪图像： e.g。

 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/

编辑：这是你上一个问题的无耻转贴;）

如何调整图像大小/裁剪图像类似于背景大小：封面？

2 个答案: