css - Bootstrap 传送带对高度不响应

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>