html - 你能用显示器: table-cell and have a fixed width/height?吗

Question

我有以下内容:

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 .我用来演示的图像是 150px x 80px。

我需要在 .photo div 中显示图像并剪掉多余部分。图像需要垂直和水平居中。但是，display:table-cell 导致 .photo div 忽略我的宽度和高度设置。我该如何解决这个问题？

Answer 1

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