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

Question

目标:

固定高度和可变宽度的包装器div。此包装器包含一张图片，其高度和宽度可变(可以是纵向或横向)。

图片应自动调整为包装器宽度的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%;
}

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