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

Question

目标：

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

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

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

我现在得到了什么：

我使用的结构为：90% - ＆gt; div - ＆gt; span - ＆gt; div。

我的尺寸完全正常。我有水平定位工作。当图像受高度约束时，我的垂直定位工作正常。

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

代码

Working Fiddle

HTML：

div

CSS：

<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>

我需要什么：

我需要修复垂直位置，而且我遇到了一堵墙。我尝试过使用.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。我无法找到实现我需要的方法。无论我选择哪个正确，所有有用的信息都会被投票。

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/