Центрировать полноэкранное изображение вертикально

Question

Я хочу центрировать полноэкранное изображение вертикально. Я не могу определить изображение в CSS, потому что изображение зависит от параметров URL.

<div>
    <img src="photo.jpg">
</div>

div {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Если я определю свой CSS изображения следующим образом:

div img {
    width: 100%;
    height: 100%;
}

Мое изображение будет растягиваться и деформироваться по высоте, чтобы поместиться на экране.

Если я определю свой CSS изображения таким образом (просто без определения высоты):

div img {
    width: 100%;
}

Мое изображение не будет растягиваться / деформироваться, но оно начнется с top: 0 изображения. Я хочу, чтобы изображение располагалось по центру по вертикали, а переполнение его высоты было скрыто.

По сути, я хочу получить то же поведение, что и в CSS с фоновым центрированием:

background: url(photo.jpg) no-repeat center;
background-size: cover;

РЕДАКТИРОВАТЬ: я забыл упомянуть, что CSS object-fit: cover работает над этим, но я ищу более кросс-браузерное решение, так как это свойство работает не во всех браузерах.

Answer 1

Попробуйте это CSS

div {
    position: fixed;
    top: 50%;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

РЕДАКТИРОВАТЬ

также плохая практика давать изображение как высоту, так и ширину. это всегда будет переопределять соотношение сторон изображения и растягивать его в каком-то направлении.

используйте это для img

div img {
    width: 100%;    
}

Это будет сначала позиционировать подразделение 50% Форма сверху. то есть изображение теперь будет иметь верхнюю часть в 50% высоты страницы, тогда свойство translate переместит изображение вверх на 50% его высоты, по существу, центрируя изображение

Answer 2

Если вы разрешите js, вы можете сделать это (при условии, что изображение имеет идентификатор "img"):

#img {
  width: 100%;
  position: absolute;
  top: 50%;
}

Отрицательный предел должен быть установлен с помощью js или jQuery (при изменении размера):

$('#img').css('margin-top', '-'+($('#img').height()/2)+'px');

Answer 3

Как насчет этого:

div {
    position:fixed;
    top:0;
    left:0;
    width: 100px;
    height: 100px;
    border:1px solid red;
    text-align:center;
    line-height:100px;
    overflow:hidden;
}

img { 
    vertical-align:middle;
    border:1px solid black; 
}

<div>
    <img src="https://www.smallbusinesssaturdayuk.com/Images/Small-Business-Saturday-UK-Google-Plus.gif">
</div>