캐 러셀 이미지 높이 축소 #

Question

색인 페이지에 회전식 문양이 있지만 브라우저를 축소하면 이미지가 전체 회전식 구조 안에 남아 있지 않은 것으로 나타났습니다. 당신이 무슨 뜻인지 이해하지 못하는 경우

, 여기에 브라우저 축소 후 회전 목마의 이미지입니다 :

당신이 볼 수 있듯이, 이미지의 폭이 브라우저 창 크기에 반응을하지만, 높이 그렇지 않으면 이미지 아래에 큰 공백이 남습니다.

<div class='carousel slide' id='hero' style='position: absolute;'> 
<div class='carousel-inner' style='z-index: -1'> 
<div class='active item'> 
    <img src='images/index/img1.jpg'> 
</div> 
<div class='item'> 
    <img src='images/index/img2.jpg'> 
</div> 
<div class='item'> 
    <img src='images/index/img3.jpg'> 
</div> 
<div class='item'> 
    <img src='images/index/img4.jpg'> 
</div> 
<div class='item'> 
    <img src='images/index/img5.jpg'> 
</div> 
<div class='item'> 
    <img src='images/index/img6.jpg'> 
</div> 
</div> 
</div> 

가 어떻게 회전 목마 내 이미지가 작은 브라우저 창에 응답해야합니까 : 여기

내 현재 코드인가?

Answer 1

그래서 나는 더 많은 연구를 한 후에 그것을 고쳤습니다. 는 CSS에서

, 나는이 있었다 :

그래서, 100 % 폭 대신 이미지의 크기를 넣어 그것을 고정

.carousel-inner { 
    overflow:hidden; 
    width:100%; 
    position:relative; 
} 

:

.carousel-inner { 
    overflow:hidden; 
    width:1920px; 
    height:1200px; 
    position:relative; 
}