溢出的图像不符合宽高比

Question

我有一个基本的缩略图列表，其中可以包含不同宽高比的图像，如下图所示：

Demo 1

问题是 - 由于纵横比的混乱，它看起来有些不整洁。

理想情况下，我希望不符合特定宽高比的图像保持居中，并根据其最短边缘优雅地溢出。

我已经设法让它适用于高大的图像但不是宽大的图像，如这个小提琴所示：

Demo 2

这是标记和CSS：

CSS

.galleryArea {
    background: rgba(0,0,0,0.7);
    display:flex;
    padding: 10px;
}
.galleryArea .imageWrapper {
    position: relative;
    width: calc(10% - 2px);
    padding-top: 8%;
    margin: 0 1px;
}
.galleryArea .imagePosition {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.galleryArea .imagePosition img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    max-width: 100%;
    width: 100%;
}

HTML

<div class="galleryArea">
    <div class="imageWrapper">
        <div class="imagePosition">
            <img src="http://placehold.it/300x300">
        </div>
    </div>
    <div class="imageWrapper">
        <div class="imagePosition">
            <img src="http://placehold.it/300x300">
        </div>
    </div>
    <div class="imageWrapper">
        <div class="imagePosition">
            <img src="http://placehold.it/150x400">
        </div>
    </div>
    <div class="imageWrapper">
        <div class="imagePosition">
            <img src="http://placehold.it/300x300">
        </div>
    </div>
    <div class="imageWrapper">
        <div class="imagePosition">
            <img src="http://placehold.it/300x100">
        </div>
    </div>
    <div class="imageWrapper">
        <div class="imagePosition">
            <img src="http://placehold.it/300x300">
        </div>
    </div>
    <div class="imageWrapper">
        <div class="imagePosition">
            <img src="http://placehold.it/300x300">
        </div>
    </div>
    <div class="imageWrapper">
        <div class="imagePosition">
            <img src="http://placehold.it/300x300">
        </div>
    </div>
    <div class="imageWrapper">
        <div class="imagePosition">
            <img src="http://placehold.it/300x300">
        </div>
    </div>
    <div class="imageWrapper">
        <div class="imagePosition">
            <img src="http://placehold.it/300x300">
        </div>
    </div>
</div>

理想情况下，这将是一个纯CSS解决方案，但如果不可能，我不介意使用JS（jQuery）来实现结果。

非常感谢

克里斯

---

修改

为了更好地说明我的意图，这里有一个示例显示它使用jQuery。这只能使用CSS来实现吗？

Demo 3

Answer 1

您可以使用transform: translate(-50%, -50%);仅使用CSS来设置图片的信箱，overflow:hidden图片上的.imagePosition宽度将垂直和水平居中对齐。

.galleryArea .imagePosition img {
    width: auto;
    max-width: inherit;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    display: block;
}

示例小提琴 - http://jsfiddle.net/v6q426bp/11/

您还可以向图片添加height:100%或width:100%，以进一步限制布局。

使用height:100% - 与上面或下面的链接相同，带有12（无法添加超过2个链接）

宽度width:100% - http://jsfiddle.net/v6q426bp/13/