Wie: scrollbaren große Bilder, kleines Bild zentriert,

Question

Egal, was ich versuche, kann ich nicht die richtige CSS für das Verhalten unter finden verwalten zu:

A: Größer-als-Fensterbilder auf die linke obere zeigen des Bildes und erlauben Scrollen, um den Rest davon zu sehen. (. Wichtig: die DIV Hintergrund der Eltern abgedeckt ist, sollte aber auf Bildern mit Transparenz sichtbar sein - auch wenn Sie scrollen)

B: Kleiner-als-Fenster-Bilder werden horizontal und vertikal zentriert, die Mutter DIV deckt das gesamte Fenster ab.

Danke für jede Hilfe!

Answer 1

Die Linienhöhe Eigenschaft erwies sich als die Basis für die Lösung des Problems. Nicht sicher, ob das ein Hack ist, aber es funktioniert.

.mainContainer { 
    text-align: center; 
} 
#mydiv { 
    line-height: 100vH; 
    margin: 0; 
} 
img { 
    vertical-align: middle; 
} 

Answer 2

Um div das kleinere Bild innerhalb des übergeordneten zum Zentrum, können Sie display:flex für die übergeordnete div verwenden. Stellen Sie dann die justify-content und align-items auf Center. Hier ist eine Behelfslösung

#mydiv { 
     overflow: auto; 
     max-width: 500px; 
     max-height:500px;  
    } 
    .mainContainer{ 
     width:500px; 
     height:500px;  
     background-color:#000;  
     display: flex; 
     justify-content: center; 
     align-items: center; 
     background-size:cover; 
    } 

Ersetzen Sie das kleine Bild mit this zu überprüfen, wie es mit einem großen Bild arbeitet.

<div class="mainContainer"> 
     <div id='mydiv'> 
     <img src='https://i1.wp.com/www.rceshop.com/wp-content/uploads/2016/12/samples.png?fit=480%2C400' /> 
     </div> 
    </div> 

PS: Ändern Sie die Breite und Höhe des Mutter div auf die gewünschte Bildschirmgröße von Ihnen. Hoffe das wird helfen!