Как отцентровать картинку по экрану?

Question

[Антон Мисягин]

<div class="img-wrapper">
<img src=...>
</div>

Полноэкранный просмотр картинки. Картинка неопределенных размеров. Нужно показать ее по центру экрана, если она умещается в размеры дисплея полностью без масштабирования. Если по какой-то оси картинка не умещается то картинка не должна уйти за пределы экрана, т.е. масштабируется с сохранением пропорций по нужной оси, либо по обеим и отображается опять по центру. Предположим картинка узкая высокая и по вертикали не умещается. Тогда высоту вписываем по размеру экрана, а по горизонтали центруем. Если картинка низкая и широкая, то сжимаем до тех пор пока не будет умещаться по горизонтали, а по вертикали центруем. Если картинка выпирает за обе границы дисплея, то сжимаем до тех пор пока она не начнет умещаться полностью на экране, и центруем ее либо по вертикали, либо по горизонтали в зависимости от пропорций экрана и картинки. Если картинка полностью умещается по всем осям, то не масштабируем, но центруем и по горизонтали и по вертикали. Буду признателен. (В продолжение темы)

Answer 1

[Алексей Зуев]

jsfiddle.net/yurzui/o10a7nwh/

Comments

[Антон Мисягин]

body {
margin: 0;
}
.img-wrapper {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.img-wrapper img {
position: absolute;
top: -9999px;
right: -9999px;
bottom: -9999px;
left: -9999px;
margin: auto;
max-width: 100%;
max-height: 100%;
}

Answer 2

[Сергей Савостин]

img
{
max-width: 100%;
max-height: 100%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}

Answer 3

[Фаёзжон Бердиев]

img{display:block;margin:0 auto;}