引导轮播对高度没有响应

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%;
}

当您调整结果框的大小时，您会看到图像的大小取决于它所在容器的高度和宽度。

---

带有carousel 的JSFiddle

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>