css - Bootstrap 轮播不响应高度

Question

我想制作一个可响应高度的 bootstrap 轮播，以便在更改轮播所在窗口的宽度和高度时，它会重新缩放图像，同时保持纵横比。

轮播默认响应宽度，但我遇到了无法使其响应高度变化的问题。

我已经尝试了一些关于类似问题的建议，但是他们并没有帮助我解决这个问题。

关于我希望轮播中的图像如何表现的 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>