调整容器中图像的大小和居中

Question

所以我有这些可变大小的图像，我试图适应某个容器元素。我想调整图像的大小，使得一侧被约束在容器内，图像的其余部分溢出。然后我想把图像居中。

我做了一个小视觉来向你展示我的意思：

现在我正在使用javascript和css混合使用。 javascript确定它是水平或垂直图像并应用一个类，然后css相应地调整大小/移动它。

如果可能，我想尝试在css中完成此操作。我有一个示例标记的小提示，向您显示我的意思（注意：此标记没有我当前的JavaScript解决方案，但如果您愿意，我可以添加它）：

http://jsfiddle.net/cBWq9/2/

以供参考，示例标记为：

<div class="thumbnail">
    <a href="#">
        <img src="http://placehold.it/350x200" alt="">
    </a>
</div>

<div class="thumbnail">
    <a href="#">
        <img src="http://placehold.it/200x350" alt="">
    </a>
</div>

使用一些容器样式：

.thumbnail {
    width: 150px;
    height: 150px;

    float: left;

    position: relative;

    overflow: hidden;

    margin: 4px;

    border: 1px solid red;
}

理想情况下，该解决方案将具有某种通用的CSS样式，可以将第一个元素图像的大小调整为150px，将第二个元素的图像调整为宽度为150px。然后将这些图像放在各自的容器中（这个居中部分可以使用css3，所以像translate这样的东西很好）。

非常感谢任何帮助。