디스플레이 : 테이블 및 최대 속성

Question

부트 스트랩 회전 목마를 사용하고 있습니다. 이 안에는 (폭과 높이가 알려지지 않은) 이미지를 넣습니다. 회전식 캐 러셀의 너비는 페이지가 반응하기 때문에 알려지지 않았습니다. 큰 화면은 500px이고 작은 화면은 300px이므로 큰 문제는 없습니다.

나는 그것을 위해, 회전 목마에서 수평 및 수직으로 이미지의 중심을 원하는

, 내가 이것을 사용하고 있습니다 :

HTML

이

<div class="item"> 
    <div class="containerOut"><div class="containerIn"><img src...></div></div> 
</div> 

CSS는

.item 
{ 
heigth: 500px; /*for small screens is 300px*/ 
position: relative; 
} 
.containerOut 
{ 
display: table; 
heigth: 100%; 
margin: 0 auto; /*for horizontal align*/ 
} 
.containerIn 
{ 
display: table-cell; 
vertical-align: middle; 
} 
img 
{ 
max-width: 100%; 
display: block; 
vertical-align: middle; 
} 

이 잘 작동 할 때 img 차원은 너비와 heigth보다 작습니다. 그러나 heigth img가 500px 이상이거나 img 너비가 회전식 캐 러셀 너비보다 큰 경우 img가 회전식 캐 러셀을 오버플로합니다. 크고 작은 화면에서 회전식으로 완전히 들어가도록 이미지의 크기를 조정하려고합니다.

컨테이너에 최대 너비 : 100 %를 넣으려고하지만 display : table 속성 때문에 작동하지 않습니다. 나는 display : table 속성을 수직으로 정렬해야한다. 왜냐하면 다른 옵션을 시도하지만 아무 것도 작동하기 때문이다.

캐 러셀 이미지의 최대 너비와 최대 높이를 100 % 지정하려면 어떻게해야합니까? 감사!

Answer 1

plunker이 문제를 해결합니까?

여기에 변화의 요약이다 : 당신의 .containerIn 사업부에 이미

img 
{ 
width: 100%; 
} 

.item 
{ 
height: 500px; 
background: blue; /*added a color only to see the height*/ 
} 

vertical-align 때문에, 당신은 또한 이미지에 적용 할 필요가 없습니다.