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 here를 참조하십시오. 내가 시연했던 이미지는 150x80 픽셀입니다.

.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

내부에 넣는다면 div이 효과가있는 것 같습니다. 왜 display:table-cell이 필요한지 잘 모르시겠습니까? 또한

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

, 당신은 단지 이미지에 폭을 넣어 간주 있나요? 이렇게하면 이미지의 높이도 그에 맞게 조정됩니다.

Answer 3

당신은 display: table-cell를 사용할 수 있지만 부모는 display: table-row이 있어야하고 행의 부모가 display: table;