Question

我想制作一个响应高度的自举轮播，以便在改变旋转木马所在窗口的宽度和高度时保持宽高比的同时重新缩放图像。

旋转木马默认响应宽度，但我遇到了一个问题，我无法对高度变化做出反应。

我已经尝试过对此类似问题的一些建议，但它们并没有帮助我解决这个问题。

关于我希望旋转木马中的图像如何表现的JSFiddle：

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>

Bootstrap旋转木马对高度没有反应

1 个答案: