Center a Variable Width/Height Image Inside Fixed Height/Variable Width Container

Question

Goal:

A wrapper div that is fixed height and variable width. This wrapper contains a picture, which will have variable height and width (Could be portrait or landscape).

The picture should resize automatically to be either 90% of the wrapper's width or 90% of the wrapper's height, whichever is the smallest. It should also be constantly centered, both horizontally and vertically.

It's somewhat hard to describe via text, so see the manipulated screenshot below for an example of three possible images, when the wrapper is three different possible widths:

What I've Got Now:

I'm using a structure of: div->span->div->img.

I've got the sizing working completely. I've got the horizontal positioning working. I've got the vertical positioning working when the image is constrained by height.

When the image starts to resize smaller (constrained by width), the vertical positioning doesn't work. This is because the inner div isn't resizing.

Code

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

What I Need:

I need to fix the vertical placement, and I am running into a wall. I've tried using display:table, I've tried creating a pseudo-element and using display:inline-block. I can't find a way to accomplish what I need. All useful info will be upvoted regardless of which I select as correct.

Answer 1

Check this:

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/