Goal:

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

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

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

我现在拥有的：

我正在使用以下结构：div->span->div->img.

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

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

Code

工作小提琴 http://jsfiddle.net/Ts4W9/

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。我找不到完成我需要的方法。无论我选择哪一个是正确的，所有有用的信息都会被投票。

检查一下：

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%;
}

fiddle: http://jsfiddle.net/Ts4W9/2/ http://jsfiddle.net/Ts4W9/2/