css - Bootstrap 轮播不响应高度

标签 css twitter-bootstrap height carousel

我想制作一个可响应高度的 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>

当您调整结果框的大小时,您会看到图像仅根据容器的宽度调整大小。

最佳答案

您可以为 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>

关于css - Bootstrap 轮播不响应高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29670711/

相关文章:

css - 如何使不同字体的间距均匀?

javascript - 使用两个 Bootstrap 日期时间选择器时 CSS z-index 的 Catch 22 情况

javascript - 我在对话框表单上的输入值未更新

css - css 高度问题 100%

android - 0dip layout_height 或 layouth_width 的诀窍是什么?

html - 相对于包含 div 的绝对定位

css - xs 时居中 div,否则右对齐

css - 框内居中 2 行文本

css - 自举装订线宽度和网格居中

javascript - jQuery、js、ajax、div 元素高度错误