我有以下几点：
CSS：
.photo {
overflow: hidden;
display: table-cell;
vertical-align: middle;
text-align: center;
width: 100px;
height: 100px;
}
HAML
.photo
%img{:src => my_url}
看到jsFiddle here.我用来演示的图像是150像素乘80像素。
我需要在.photo div中显示图像，并裁剪任何多余的图像。图像需要垂直和水平居中。但是，显示：table-cell会导致.photo div忽略我的宽度和高度设置。我该怎么办？
解决方法
table-cell不是垂直对齐的唯一解决方案。
.photo {
overflow: hidden;
background: #c0c0c0;
display:inline-block; /* or float:left; */
text-align: center;
width: 100px;
height: 100px;
line-height:97px;
}
.photo img {
vertical-align:middle;
max-width:100%;
max-height:100%;
}
