부트 스트랩 캐로 셀 높이

Question

내 웹 사이트에 캐 러셀을 만들려고하지만 이미지의 높이가 같지 않습니다. 웹에서 검색 한 결과 아무도 실제로 작동하지 않는 "img-responsive"클래스를 사용하지 않았거나 제대로 사용하지 못하고 있다는 사실에 놀랐습니다 ...

내 질문은; "img-responsive"클래스가 제대로 작동하지 않는 이유는 무엇입니까? (추신 : 회전 목마 - 내부 클래스의 최대 높이를 고치려고했지만 이미지의 크기가 제대로 조정되지 않았습니다.)

여기 내 코드가 있습니다. 아무도 도와 줄 수 있습니까?

<div class="row"> 
    <div id="Carousel" class="carousel slide col-lg-12" data-ride="carousel"> 
     <!-- Indicators --> 
     <ol class="carousel-indicators"> 
      <li data-target="#Carousel" data-slide-to="0" class="active"></li> 
      <li data-target="#Carousel" data-slide-to="1"></li> 
      <li data-target="#Carousel" data-slide-to="2"></li> 
      <li data-target="#Carousel" data-slide-to="3"></li> 
     </ol> 

     <!-- Wrapper for slides --> 
     <div class="carousel-inner col-lg-12" role="listbox"> 
      <div class="item active"> 
       <img class="img-responsive" src="Images/Articles/Suisei_no_gargantia.jpg" alt="Suisei_no_gargantia"> 
       <div class="carousel-caption"> 
        <h4>Header</h4> 
        <p>Sample text</p> 
       </div> 
      </div> 

      <div class="item"> 
       <img class="img-responsive" src="Images/Articles/Pokemon.jpg" alt="Pokemon"> 
      </div> 

      <div class="item"> 
       <img class="img-responsive" src="Images/Articles/Nisekoi.jpeg" alt="Nisekoi"> 
      </div> 

      <div class="item"> 
       <img class="img-responsive" src="Images/Articles/High_School_Of_The_Dead.jpg" alt="High_School_Of_The_Dead"> 
      </div> 
     </div> 

    <!-- Left and right controls --> 
     <a class="left carousel-control" href="#Carousel" role="button" data-slide="prev"> 
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
      <span class="sr-only">Previous</span> 
     </a> 
     <a class="right carousel-control" href="#Carousel" role="button" data-slide="next"> 
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
      <span class="sr-only">Next</span> 
     </a> 
    </div> 
</div> 

Answer 1

나는 언젠가 자신의 답변을 검색하고 아무 것도 중요하지 않다. 어쨌든 문제를 해결할 수있는 CSS가 있습니다.

//Add following class in tag <div id="Carousel" class="carousel slide col-lg-12" data-ride="carousel"> 

.video-container{ 
    position: relative; 
    padding-bottom: 56.25%; 
    padding-top: 10px; height: 0; overflow:hidden; 
} 

.video-container div, 
.video-container img, 
.video-container iframe, 
.video-container object, 
.video-container embed { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 

동일한 높이와 응답 속도로 이미지를 얻는 데 효과가있었습니다.

Answer 2

나는 똑같은 문제가 있었으며 부트 스트랩의 회전식 슬라이드에는 고정 된 높이가 없기 때문에 img 반응 클래스가 도움이되지 않는다는 것을 발견했습니다.

img-responsive 클래스를 제거하는 것이 좋습니다.

나는 미디어 쿼리와 item 사업부에 대한 정확한 높이를 지정하고 img 태그에 다음과 같은 CSS를 추가, 그래서 같은 :

/* Extra small devices (phones, less than 768px) */ 
/* No media query since this is the default in Bootstrap */ 
#Carousel .carousel-inner .item { 
    height:200px; 
} 

/* Small devices (tablets, 768px and up) */ 
@media (min-width: 768px) { 
#Carousel .carousel-inner .item { 
    height:300px; 
} 
} 

/* Medium devices (desktops, 992px and up) */ 
@media (min-width: 992px) { 
#Carousel .carousel-inner .item { 
    height:400px; 
} 
} 

/* Large devices (large desktops, 1200px and up) */ 
@media (min-width: 1200px) { 
#Carousel .carousel-inner .item { 
    height:500px; 
} 
} 

#Carousel .carousel-inner .item img { 
max-height: 100%; 
max-width: 100%; 
position: absolute; 
top: 0; 
bottom: 0; 
left: 0; 
right: 0; 
margin: auto; 
}