在固定高度/可变宽度容器内居中可变宽度/高度图像

Question

目标：

一个包装器div，它是固定的height 和变量width。此包装器包含一张图片，该图片具有可变的高度和宽度（可以是纵向或横向）。

图片应自动调整为包装器的width 的90% 或包装器高度的90%，以最小者为准。它还应该在水平和垂直方向上始终居中。

这有点难以通过文本来描述，因此请参阅下面的操作屏幕截图，以获取三个可能的图像的示例，当包装器具有三种不同的可能宽度时：

我现在得到了什么：

我使用的结构是：div->span->div->img。

我已经完全确定了尺寸。我有水平定位工作。当图像受高度限制时，我的垂直定位工作正常。

当图像开始缩小（受宽度限制）时，垂直定位不起作用。这是因为内部 div 没有调整大小。

代码

Working Fiddle

HTML：

<div class="selected-thumb">
    <span>
        <div>
           <img src="http://www.andymercer.net/wp-content/uploads/2014/01/tree26-300x225.jpg"></img> 
        </div>
    </span>
</div>

<div class="selected-thumb">
    <span>
        <div>
           <img src="http://www.andymercer.net/wp-content/uploads/2014/03/ada_complete-300x171.png"></img> 
        </div>
    </span>
</div>

<div class="selected-thumb">
    <span>
        <div>
           <img src="http://www.andymercer.net/wp-content/uploads/2013/12/employee_randy_fake-209x300.jpg"></img> 
        </div>
    </span>
</div>

CSS：

.selected-thumb {
    text-align: center;
    background: #c0c0c0;
    border: #a0a0a0 solid 1px;
    margin: 20px;
    height:200px;
}

.selected-thumb span {
    display:block;
    height:200px;
 }

.selected-thumb span div {
    position:relative;
    max-height:90%;
    max-width:90%;
    height:200px;
    top:50%;
    margin:0 auto;
}
.selected-thumb span div img {
    width:auto;
    height:auto;
    max-height:100%;
    max-width:100%;
    position:relative;
    top:-50%;
}

我需要什么：

我需要修复垂直放置，但我正在撞墙。我试过使用display:table，我试过创建一个伪元素并使用display:inline-block。我找不到完成我需要的方法。无论我选择哪个正确，所有有用的信息都会被投票。

Answer 1

检查一下：

html,body {height:100%;}

.selected-thumb {
    text-align: center;
    background: #c0c0c0;
    border: #a0a0a0 solid 1px;
    margin: 20px;
    height:200px;
    line-height: 200px;
}

.selected-thumb img {
    display: inline-block;
    vertical-align: middle;
    width:auto;
    height:auto;
    max-height:90%;
    max-width:90%;
}

小提琴：http://jsfiddle.net/Ts4W9/2/