Html 是否可以使用显示：表格单元格并具有固定的宽度/高度？

我有以下资料：

CSS:

.photo {
  overflow: hidden;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: 100px;
  height: 100px;
}

HAML

.photo
  %img{:src => my_url}

请参阅jsFiddle。我用来演示的图像是150px乘以80px

---

我需要在

.photo

div中显示图像，并裁剪掉多余的图像。图像需要垂直和水平居中。但是，

display:table cell

会导致

.photo

div忽略我的宽度和高度设置。我怎样才能避开这个问题呢？

如果你在里面放一个

div

，它似乎可以工作。不确定为什么首先需要

显示：表格单元格

---

另外，您是否考虑过在图像上加一个宽度？这将导致图像的高度也相应地调整大小。

表格单元格

不是垂直对齐的唯一解决方案

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

---

您可以使用

display:table单元格

，但是父级需要有

display:table行

，并且该行的父级应该有

display:table
能否将图像设置为
背景图像
并调整偏移以将其放置在正确的位置？问题是，我得到的图像大小不一。那么。照片容器将扩展到的最大高度/宽度是多少？还是将尺寸严格保持在100x100？@Dan:容器的宽度/高度需要固定，mu:尺寸完全是随机的。你能开始存储图像尺寸吗？这将使这个问题很容易解决，并允许您使用具有
宽度
和
高度
属性的适当
元素。我需要显示：表格单元格用于垂直对齐：中间对齐。这种方法的缺点是，您需要在
上设置一个固定的高度和宽度。photo
@Dan Willis为什么要对齐“.photo img”垂直于“.photo”如果“.photo”不是固定大小？@Tod有时您不想设置容器的高度。一个简单的例子：模拟表行，行高度（容器）必须是最大单元格高度的大小。在这种情况下，我们不能设定高度。这是当你有多条线的时候