将缩略图图像垂直对齐 - CSS

Question

客户端正在上传不同高度的缩略图图像，而我的图像库似乎不会将事物对齐到顶部。我一直在旋转我的车轮一段时间，试图找到问题。任何帮助非常感谢。

这里有一个链接，你会看到较高的图像是不是像小一样的顶部对齐。但是，所有较小的图像都对齐正确。

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

Answer 1

我为

.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>

的解决方案，您可以使用这一招， 调整DIV（图像容器）的宽度和高度的需要。 用户上传的图片必须位于图片容器div内。 图像必须宽100％（样式）。

OR

如果你希望显示整个PIC的样品只需要使用这个样式表。去除div的溢出属性并赋予图像高度（容器本身的高度）

.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; 
}