Бутстрап карусельный не реагирует на высоту

Question

Хотим сделать самозагрузки карусельным реагировать на высоту, так что он будет масштабировать изображение, сохраняя пропорции при изменении ширины и высоты окна карусели находится.

Карусель реагирует на ширину по умолчанию, но у меня возникла проблема, когда я не могу реагировать на изменения высоты.

Я пробовал некоторые предложения по подобным вопросам к этому, они, однако, не помогли мне решить эту проблему.

JSFiddle о том, как я хотел бы изображения в карусели себя:

like this

HTML:

<div> 
<img src="http://zoarchurch.co.uk/content/pages/uploaded_images/91.png" class="responsive-img" /> 
</div> 

CSS:

.responsive-img { 
    position: absolute; 
    max-height: 100%; 
    max-width: 100%; 
} 

Как изменить размер в результате вы увидите, что изображение изменяется в зависимости от высоты и t он ширина контейнера он находится в

---

А JSFiddle с carousel

HTML:.

<div id="myCarousel" class="carousel slide"> 
    <ol class="carousel-indicators"> 
     <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
     <li data-target="#myCarousel" data-slide-to="1"></li> 
    </ol> 
    <div class="carousel-inner"> 
     <div class="item active"> 
      <img src="http://zoarchurch.co.uk/content/pages/uploaded_images/91.png" /> 
     </div> 
     <div class="item "> 
      <img src="http://www.mildred.co/issueassets/22/14RSowlhat.jpg" /> 
     </div> 
    </div> 
    <!-- Carousel nav --> <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a> 
<a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a> 

</div> 

Как изменить размер окна результата вы увидите, что изображение только изменяет размер в зависимости по ширине контейнера.

Answer 1

Вы можете использовать фоновое изображение для div с шириной и высотой, установленным для рендеринга в карусели. Здесь вы можете посмотреть, как это можно реализовать. http://jsfiddle.net/cuytnzja/4/

.carousel-img{ 
 
    width: 100%; 
 
    height:500px; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale'); 
 
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')"; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="myCarousel" class="carousel slide"> 
 
    <ol class="carousel-indicators"> 
 
     <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
 
     <li data-target="#myCarousel" data-slide-to="1"></li> 
 
    </ol> 
 
    <div class="carousel-inner"> 
 
     <div class="item active"> 
 
      
 
      <div class="carousel-img" style="background: url('http://zoarchurch.co.uk/content/pages/uploaded_images/91.png') no-repeat 50% 50% fixed"> 
 
       
 
      </div> 
 
     </div> 
 
     <div class="item "> 
 
      <div class="carousel-img" style="background: url('http://www.mildred.co/issueassets/22/14RSowlhat.jpg') no-repeat 50% 50% fixed"> 
 
          
 
      </div>    
 
     </div> 
 
    </div> 
 
    <!-- Carousel nav --> <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a> 
 
<a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a> 
 

 
</div>