자동 중심 및 Div의 이미지 종횡비 유지

Question

가로 세로 비율을 유지하면서 div의 이미지를 가운데에 놓으려고합니다.이 코드를 사용하지만 어떻게 든 센터의 항목을 정렬하지 않습니다 (위/아래 중앙) . 가능한 경우 CSS 만 사용하십시오.

최대 너비를 사용하기 때문에 이미지의 크기를 알 수 없습니다!

JSfiddle은 : http://jsfiddle.net/L41wpza6/2/

#imageHolder { 
width: 400px; 
height: 400px; 
line-height: 400px; 
background-color:#CCCCCC; 
} 

#imageHolder img { 
max-width: 100%; 
    max-height:100%; 
    display: block; 
    margin: 0 auto; 
    vertical-align: middle; 

}

은 어떤 도움에 감사드립니다! 나는이 일을하기 위해 내가 무엇을 놓치고 있는지 확신하지 못한다.

Answer 1

JSFiddle - DEMO가

당신은 수직 정렬 중간에 #imageHolder img에 display: inline-block;를 사용해야합니다.

CSS 표시 인라인 블록 속성을 사용하면 요소가 인라인 요소처럼 흐르게되지만 블록 요소처럼 폭과 같은 속성을 존중하며 표시 인라인 블록을 사용하여 세로 맞춤 가운데를 설정할 수 있습니다.

HTML :

<div id="imageHolder"> 
    <img src="http://www.discoverjb.com/wp-content/uploads/2014/07/IMG_1399.jpg"> 
</div> 

CSS : 하나 수평 중심을 찾고

#imageHolder { 
    width: 400px; 
    height: 400px; 
    line-height: 400px; 
    background-color:#CCCCCC; 
} 
#imageHolder img { 
    max-width: 100%; 
    max-height:100%; 
    display: inline-block; /* Instead of display: block; */ 
    margin: 0 auto; 
    vertical-align: middle; 
} 

Answer 2

.

@sibbl의 해결책이 효과적이지만, 수평의 경우 이미지 상단에 여전히 일부 픽셀이 있습니다.

내가 @Anoymous 코드 imporoved 한

HTML :

<div class="imageHolder"> 
    <img src="http://lorempixel.com/g/800/400"> 
</div> 
<div class="imageHolder"> 
    <img src="http://lorempixel.com/g/800/800"> 
</div> 
<div class="imageHolder"> 
    <img src="http://lorempixel.com/g/400/800"> 
</div> 

CSS :

.imageHolder { 
    width: 300px; 
    height: 300px; 
    background-color:#CCCCCC; 
    margin:10px; 
    display:inline-block; 
    float:left; 
    position:relative; 
} 
.imageHolder img { 
    max-width: 100%; 
    max-height:100%; 
    margin: auto; 
    position:absolute; 
    top:0; 
    left:0; 
    right:0; 
    bottom:0; 
} 

JSFiddle - 빠른 회신 DEMO