滑块高度技术

Question

我有 bootstrap 轮播的代码。但是当将 window 减小到较小的屏幕时，高度不会减小。我已经使用了 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

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

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

滑块高度技术

Slider height technique

html

css

jquery

resize

twitter-bootstrap