Vollbild vertikal zentrieren

Question

Ich möchte ein Vollbild vertikal zentrieren. Ich kann kein Bild in CSS definieren, da das Bild von URL-Parametern abhängt.

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

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

Wenn ich mein Bild CSS wie folgt definieren:

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

Mein Bild wird strecken und in Höhe verformt werden auf dem Bildschirm zu passen.

Wenn ich mein Bild CSS wie folgt definieren (nur ohne Höhe definieren):

div img { 
    width: 100%; 
} 

Mein Bild wird nicht dehnen/verformt werden, aber es wird bei top: 0 des Bildes beginnen. Was ich will ist, dass das Bild vertikal zentriert wird und der Überlauf seiner Höhe versteckt wird.

Grundsätzlich mag ich das gleiche Verhalten, das ich in CSS mit Hintergrund zentrierte bekommen würde:

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

EDIT: Ich habe vergessen, dass die CSS object-fit: cover Werke zu erwähnen, aber ich bin auf der Suche nach einem grenzüberschreit Browser-Lösung, da diese Eigenschaft nicht in jedem Browser funktioniert.

Answer 1

Versuchen Sie, diese css

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

EDIT

auch seine schlechte Praxis das Bild um die Höhe und die Breite zu geben. Dies überschreibt immer das Seitenverhältnis des Bildes und dehnt es in eine Richtung.

Verwendung für diese img

div img { 
    width: 100%;  
} 

Dies wird zunächst die Form oben Division 50% positionieren. dh das Bild wird nun seine oberste Teil an 50% der Seitenhöhe dann die translate Eigenschaft wird das Bild nach oben durch 50% seiner Höhe im Wesentlichen Zentrieren des Bildes

Answer 2

Wie wäre es damit bewegen:

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>

Answer 3

Wenn Sie js zulassen, können Sie dies tun (das Bild unter der Annahme hat id 'img'):

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

Eine negative Marge oben muss js oder jQuery (auf Resize) unter Verwendung gesetzt werden:

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