¿Se puede usar display: table-cell y tiene un ancho/alto fijo?

Question

Tengo el siguiente:

CSS:

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

HAML

.photo 
    %img{:src => my_url} 

Véase el jsFiddle here. La imagen que usé para demostrar es 150px por 80px.

Necesito mostrar la imagen dentro del div .photo y recortar cualquier exceso. La imagen debe estar centrada vertical y horizontalmente. Sin embargo, display:table-cell hace que el div .photo ignore mi configuración de ancho y alto. ¿Cómo puedo evitar esto?

Answer 1

table-cell no es la única solución para la alineación vertical.

.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

Si pones un interior div, parece que funciona. ¿No está seguro de por qué necesita display:table-cell en primer lugar?

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

Además, ¿ha considerado simplemente poniendo una anchura en la imagen? Esto causará que la altura de la imagen también cambie de tamaño en consecuencia.

Answer 3

Puede utilizar display: table-cell pero el padre tiene que tener display: table-row y el padre de la fila debe tener display: table;