작은 화면/창에서 부트 스트랩의 반응 형 회전식 이미지가 너무 작아지는 것을 어떻게 막을 수 있습니까?

Question

부트 스트랩을 사용하여 웹 사이트를 만들고 있습니다. 홈페이지에 캐 러셀 이미지가 있지만 브라우저 창을 작게 만들거나 스마트 폰에서 열면 회전식 이미지가 너무 작아서 이상하게 보입니다.

은 여기의 의미는 다음과 같습니다 http://www.bootply.com/BmzEiDLmC4

나는 이미지의 높이가 일정하게 유지 될 수 있고, 브라우저 창이 작은 경우 이미지가 왼쪽과 오른쪽에 잘립니다 도착 영향을하고 싶습니다. 이런 식으로 뭔가 : 나는 Stakoverflow뿐만 아니라 사용하여 Goolge에 그것을 찾는 시도했지만 해결책을 찾을 수 없습니다

http://www.fuseproject.com/

.

이것은 간단한 문제 일지 모르지만 웹 개발에 대한 제한된 지식으로는 해결책을 찾을 수 없습니다. 아무도 도와 줄 수 있다면 정말 감사 할 것입니다.

감사합니다.

Answer 1

데모 : https://jsbin.com/lefizo/1/

사용 배경 고정 높이 .item 이미지, 필요에 따라 미디어 쿼리를 조정합니다.

CSS :

#my-carousel .carousel-inner .item { 
    width: 100%; 
    height: 300px; 
} 
#my-carousel .carousel-inner .item { 
    background-image: url(http://dummyimage.com/1500x500/333/999.png); 
    background-size: cover; 
    background-position: center top; 
} 
#my-carousel .carousel-inner .item-2 { 
    background-image: url(http://dummyimage.com/1500x500/555/999.png) 
} 
#my-carousel .carousel-inner .item-3 { 
    background-image: url(http://dummyimage.com/1500x500/777/999.png) 
} 
@media (min-width:768px) { 
    #my-carousel .carousel-inner .item { 
     height: 500px 
    } 
} 

HTML :

<!-- carousel start --> 

<div class="containter"> 

     <div class="carousel carousel-fade slide" id="my-carousel"> 

     <ol class="carousel-indicators"> 
      <li data-target="#my-carousel" data-slide-to="0"></li> 
      <li data-target="#my-carousel" data-slide-to="1"></li> 
      <li data-target="#my-carousel" data-slide-to="2"></li> 
     </ol> 

     <div class="carousel-inner"> 
      <div class="item active item-1"> 
      <a href="#"></a> 
     </div> 
      <div class="item item-2" > 
      <a href="#"></a> 
     </div> 
      <div class="item item-3"> 
      <a href="#"></a> 
     </div> 
     </div> 
     <!-- remove the a href tag to remove link that does not need it --> 

     <a href="#my-carousel" class="carousel-control left" data-slide="prev"><!-- <span class="glyphicon glyphicon-chevron-left"></span> --></a> 
     <a href="#my-carousel" class="carousel-control right" data-slide="next"><!-- <span class="glyphicon glyphicon-chevron-right"></span> --></a> 

    </div> 

</div> 
<!-- carousel end -->