Можете ли вы использовать display: table-cell и иметь фиксированную ширину/высоту?

У меня есть следующее:

CSS

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

HAML

.photo
  %img{:src => my_url}

Смотрите jsFiddle здесь. Изображение, которое я использовал для демонстрации, составляет 150 пикселей на 80 пикселей.

Мне нужно отобразить изображение внутри div .photo и обрезать лишний. Изображение должно быть центрировано по вертикали и по горизонтали. Однако display:table-cell заставляет div .photo игнорировать мои настройки ширины и высоты. Как я могу обойти это?

Ответ 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%;
}

Ответ 2

Вы можете использовать display: table-cell, но родитель должен иметь display: table-row, а родительский элемент строки должен иметь display: table;

Ответ 3

Если вы поместили внутренний div, он, похоже, сработает. Не знаете, почему вам нужно display:table-cell в первую очередь?

http://jsfiddle.net/locrizak/5tawU/

Кроме того, вы считали, что просто накладываете ширину на изображение? Это приведет к тому, что высота изображения также будет соответствующим образом изменена.