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

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 здесь .Изображение, которое я использовал для демонстрации, имеет размер 150 на 80 пикселей.

Мне нужно отобразить изображение внутри .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%;
}

Answer 2

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

Answer 3

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

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

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