Automatisch img zoomen?

Question

Ich habe eine Reihe von Bildern nacheinander in einem div angezeigt. Die Bilder sind alle ein paar tausend Pixel um ein paar tausend Pixel.

Zum Beispiel ist ein Bild 4353x2721.

Wenn ich eine Vorschau der Seite anzeige, wird das Bild vergrößert und nur entlang der oberen und unteren Kante abgeschnitten. Es bleibt die richtige Breite.

Ich brauche es nur zu skalieren, so dass es richtig auf den Bildschirm/div passt, ohne irgendwelche Teile zu schneiden.

Die CSS für diesen Abschnitt ist:

.largeImage img { 
    position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
} 

Wenn ich hinzufügen height:100%;, es funktioniert immer noch nicht. Immer noch zoomt.

Answer 1

Sie müssen max-width: 100% und max-height: 100% für Bild festlegen. Das Bild wird so angepasst, dass es der Größe des übergeordneten Containers entspricht und andere Dimensionen verkleinert.

Blick auf Schnipsel:

.largeImage { 
 
    width: 150px; 
 
    height: 200px; 
 
    display: inline-block; 
 
    position: relative; 
 
    border: 1px solid green; 
 
} 
 

 
.largeImage img { 
 
    display: block; 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
    right: 0; 
 
    margin: 0 auto; 
 
    max-width:100%; 
 
    max-height:100%; 
 
}

<div class="largeImage"> 
 
    <img src="http://lorempixel.com/output/food-q-c-640-480-5.jpg"> 
 
</div> 
 

 
<div class="largeImage"> 
 
    <img src="http://lorempixel.com/output/nature-h-c-640-1233-7.jpg"> 
 
</div>