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

如果您希望显示整张照片的样本，请使用此样式表。删除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;
}

将缩略图垂直对齐到顶部 - CSS

1 个答案: