保持图像比率的问题，并显示在div的中间

Question

我正在使用bootstrap

我有一排4张图片。每个图像的大小和宽高比都不同。有些又高又瘦，有些短而宽。

我试图让它们在四个方框内显示，垂直和水平居中，没有溢出或被压扁。我怎么能这样做？

目前我有这个：

我想让它显示如下：

HTML：

<div class="row list-group">
    <div class="item col-xs-3 featured_product">
        <div class="imagecontainer">
            <img src="http://dummyimage.com/200x900/a3a3a3/3b3b3b.jpg" />
        </div>
    </div>
    <div class="item col-xs-3 featured_product">
        <div class="imagecontainer">
            <img src="http://dummyimage.com/700x300/a3a3a3/3b3b3b.jpg" />
        </div>
    </div>
    <div class="item col-xs-3 featured_product">
        <div class="imagecontainer">
            <img src="http://dummyimage.com/600x100/a3a3a3/3b3b3b.jpg" />
        </div>
    </div>
    <div class="item col-xs-3 featured_product">
        <div class="imagecontainer">
            <img src="http://dummyimage.com/200x200/a3a3a3/3b3b3b.jpg" />
        </div>
    </div>
</div>

CSS：

.imagecontainer {
    width:100%;
    height:300px;
    border:1px solid;
    padding:10px;
    text-align: center;
    margin: 1em 0;
}
.imagecontainer img {
    width:100%;
    vertical-align: middle;
    max-height:290px;
}

的jsfiddle： http://jsfiddle.net/0kt00prh/

Answer 1

你可以试试这个，它使用css transform适用于IE9及以上版本。并且使用透明边框作为间距，可能还有其他方法可以做到这一点，但看起来效果很好。

http://jsfiddle.net/0kt00prh/1/

.imagecontainer {
    position: relative;
}
.imagecontainer img {
    max-height:100%;
    max-width: 100%;
    border: 10px solid transparent;
    position: absolute;
    left: 50%;
    top: 50%;
    transform:translate(-50%, -50%);
}

Answer 2

试试这个解决方案：

.imagecontainer {
    width:100%;
    height:300px;
    border:1px solid;
    padding:10px;
    text-align: center;
    margin: 1em 0;
    position:relative;
    overflow:hidden;
}
.imagecontainer img {
    width:100%;
      position: absolute;
  top: 50%;
left:50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

它只适用于更现代的浏览器。 IE9 +

JSFIDDLE