垂直对齐缩略图图像的顶部- 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(image-container)的宽度和高度。用户上传的图像必须在图像容器div中。图片宽度(样式)必须为100%。

或

如果你想显示整个图片的样本，只需使用这个样式表。删除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;
}