我有一个基本的缩略图列表，它可以包含不同纵横比的图像，如图所示：

演示1

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

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

我已经设法使其适用于高图像，但不适用于宽图像，如本小提琴所示：

演示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）来实现结果。

非常感谢

Chris

编辑

为了更好地说明我的意图，这里有一个使用jQuery的例子。这是否只能使用CSS实现？

演示3