Можно ли использовать 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 пикселей.

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