Richten Sie die Miniaturbilder vertikal nach oben aus - CSS

Question

Der Client lädt Thumbnails mit unterschiedlichen Höhen hoch und meine Bildergalerie scheint die Objekte nicht nach oben auszurichten. Ich habe meine Räder eine Weile gedreht und versucht, das Problem zu finden. Jede Hilfe wird sehr geschätzt.

Hier ist ein Link, Sie sehen, wie die höheren Bilder nicht oben ausgerichtet sind wie die kleineren. Alle kleineren Bilder werden jedoch korrekt ausgerichtet.

http://scharf.geodesicgrafx.com/gallery/stock-photos-non-exclusive

Answer 1

Ich habe eine Lösung für diese

.image-container{ 
 
    width: 200px; 
 
    height: 200px; 
 
    border: 2px solid #a29e9e; 
 
    border-radius: 2px; 
 
    overflow: hidden; 
 
    } 
 
img{ 
 
    width:100%; 
 
    -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */ 
 
    transition: all 2s; 
 
} 
 
img:hover{ 
 
    width:200%; 
 
    margin-left:-70px; 
 
    margin-top:-90px; 
 
    }

<div class="image-container"> 
 
<img src="http://scharf.geodesicgrafx.com/images/dmImage/SourceImage/197405-1-6Ca-Spider-Mite1.jpg"> 
 
</div>

Sie diesen Trick verwenden, justieren die Breite und Höhe des div (Bild-Container) als brauchen. Bilder, die vom Benutzer hochgeladen werden, müssen in den Bildcontainer div kommen. Das Bild muss 100% breit sein (Stil).

ODER

Wenn Sie die Probe Voll Bild zu zeigen, benutzen Sie einfach dieses Stylesheet. Überlaufeigenschaft des Divs entfernen und dem Bild Höhe geben (Höhe des Containers selbst)

.image-container{ 
    width: 200px; 
    height: 200px; 
    border: 2px solid #a29e9e; 
    border-radius: 2px; 
    } 
img{ 
    width:100%; 
    -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */ 
    transition: all 2s; 
    height:200px; 
}