Горизонтальне та вертикально-центроване Відповідне зображення - html, css, html5, css3, alignment

Я намагаюсь отримати зображення по горизонталі та вертикалі в центрі в межах різної висоти та ширини. Поки так добре. (Дивіться посилання на jsfiddle нижче)

Тепер знімок зображення також повинен бути чуйним і коригувати, якщо висота та / або ширина контейнера менша за висоту або ширину зображень.

Дослідивши, переглянувши всі різні «рішення» там і вдаючись до рішення, я не зміг знайти ідеального, проте два наблизилися:

1.) Цей перший робить усе, що потрібно, за винятком випадків, коли ширина вікна менша за ширину зображення, зображення більше не горизонтально вирівнюється:

http://jsfiddle.net/me2loveit2/ejbLp/8/

HTML

<div class="overlay">
<div class="helper"></div>
<img src="/images/http://dummyimage.com/550x480/000/fff?text=H/V Centered and height/width variable">
</div>

CSS

.helper {
height:50%;
width:100%;
margin-bottom:-240px;
min-height: 240px;
}
.overlay {
width: 100%;
height: 100%;
position: fixed;
top: 0px;
left: 0px;
cursor: pointer;
background-color: rgba(0, 0, 0, 0.5);
}
img {
margin: 0 auto;
max-width: 100%;
max-height: 100%;
display: block;
}

2.) У цьому другому прикладі все вирівнюється, але зображення не зменшується вниз, коли висота менше висоти зображення:

http://jsfiddle.net/me2loveit2/ejbLp/9/

HTML

<div id="outer">
<div id="container">
<img src="/images/http://dummyimage.com/550x480/000/fff?text=H/V Centered and height/width variable">
</div>
</div>

CSS

#outer {
height:100%;
width:100%;
display:table;
position:fixed;
top:0px;
left:0px;
background-color: rgba(0, 0, 0, 0.5);
}
#container {
vertical-align:middle;
display:table-cell;
max-width: 100%;
max-height: 100%;
}
img {
margin: 0 auto;
max-width: 100%;
max-height: 100%;
display:block;
}

Відповіді:

1 для відповіді № 1

Я намагався цього робити раніше, і єдине рішення, яке не є JS, яке я "придумав" з несхваленням, до речі) це:

html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}

body {
display: table;
}

.container {
display: table-cell;
vertical-align: middle;
border: 1px solid #f00;
}

.container > div {
width: 100%;
height: 100%;
margin: 0 auto;
border: 1px solid #00f;
max-width: 550px;
max-height: 480px;
background: url("http://dummyimage.com/550x480/000/fff?text=H/V Centered and height/width variable") 50% 50% no-repeat;
background-size: contain;
}

<div class="container"><div></div></div>

http://jsfiddle.net/pYzBf/1/

Встановіть колір тла div до чорного, щоб побачити масштабування без країв зображення. Я використав ці розміри, щоб ви могли протестувати його, змінивши розмір кадру.

---