固定大小的图像容器

Question

我有以下图片容器：

<div class="images">
    <img src="<%=imageURL %>" />
</div>

.images的css是：

.images{
display:inline-block;
width:100px;
height:133px;
overflow:hidden;
}

我的图像具有不同的尺寸，这就是为什么我使用上面的div胶囊使它们的大小相同。但在页面中，我的图像是这样的：

他们的上衣没有对齐。我该如何纠正？

Answer 1

添加vertical-align:top

.images{
    display:inline-block;
    width:100px;
    height:133px;
    overflow:hidden;
    vertical-align:top
}

Answer 2

使用float

.images{
       float:left;
       width:100px;
       height:133px;
       overflow:hidden;
      }