Question

我有一个bootstrap轮播的代码。但是当窗口减小到较小的屏幕时，高度不会降低。我使用过JQuery，但仍面临问题。

<div class="container-fluid nopad">
    <div class="row-fluid nopad">
        <div class="col-lg-12 top_slider">
            <!-- Slider -->
            <div class="carousel slide" id="carousel_top" data-ride="carousel">
                <div class="carousel-inner" role="list-box">
                    <div class="item active">
                        <img src="img/slides/slide-01.png">
                    </div>
                    <div class="item">
                        <img src="img/slides/slide-02.png">
                    </div>
                    <div class="item">
                        <img src="img/slides/slide-03.png">
                    </div>
                </div>
            </div>
            <!-- End -->
        </div>
    </div>

CSS

.top_slider{
    width:100%;
    height:auto;
    background:#f2f2f2;
    overflow:hidden;
    padding:0 !Important;

}
.top_slider .carousel{
    width:100%;
}
.top_slider .carousel-inner .item{
    height:400px;
    width:100%;
}
.top_slider .carousel-inner .item  img{
    width:100%;
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    -webkit-transform:translateY(-50%);
    -moz-transform:translateY(-50%);
    z-index:1;
}

在我的智能手机中检查我的文件时，遇到同样的问题。我不知道我的JQuery代码有任何错误。这是我用过的代码

$(document).ready(function(){
    var obj_height_on_ready= $('.top_slider .carousel-inner .item  img').height();
    if($(window).width() <= 769){
            $('.top_slider .carousel-inner .item').css({"height": obj_height_on_ready});
            $('.short_desc_tab').text(obj_height_on_ready);
        }
        else{
            $('.top_slider .carousel-inner .item').css({"height": "400"});

        }


});

Answer 1

问题是由height:400px元素的.item引起的。此外，.item元素内的图像是绝对定位的。将.top_slider .carousel-inner .item img替换为以下内容，并且轮播完全响应。你甚至不需要你的jQuery。

.top_slider .carousel-inner .item img {
  display: block;
  width: 100%;
  height: auto;
}

滑块高度技术

1 个答案: