如何制作全屏BootStrap轮播[重复]答案

【问题标题】：How to make a full screen BootStrap carousel [duplicate]如何制作全屏BootStrap轮播[重复]
【发布时间】：2016-05-04 00:38:59
【问题描述】：

如何通过单击按钮强制引导轮播进入全屏模式？ Here 是一个工作示例，这是我拥有的代码：

<div class="container">
<div class="well span9 columns">
    <div id="myCarousel" class="carousel slide">
        <div class="carousel-inner">
            <div class="item active">
                <img src="http://bootstrapdocs.com/v2.0.3/docs/assets/img/bootstrap-mdo-sfmoma-01.jpg" alt="" />
            </div>
            <div class="item">
                <img src="http://bootstrapdocs.com/v2.0.3/docs/assets/img/bootstrap-mdo-sfmoma-02.jpg" alt="" />
            </div>
            <div class="item">
                <img src="http://bootstrapdocs.com/v2.0.3/docs/assets/img/bootstrap-mdo-sfmoma-03.jpg" alt="" />
            </div>
        </div> 
        <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
    </div>
        <button type="button" class="btn btn-inverse fulesize"><i class="icon-fullscreen icon-white"></i></button> 
</div>
</div>

jQuery 是：

$(".fulesize").click(function(){
  $(".carousel-inner, .carousel, .item, .active ").addClass("full");
 });

和 CSS：

html{height:100%;}
.full{height:100%;}

【问题讨论】：

这个问题已经被问过几次了。这是一种解决方案：stackoverflow.com/questions/16350902/…
嗨，迈克尔，感谢您的回复，我已经看到了这篇文章，我试图在我的示例中使用相同的代码，但它不起作用！
您希望您的图片拉伸以填满整个屏幕吗？请注意，它们可能会变形。

标签： jquery twitter-bootstrap fullscreen carousel

【解决方案1】：

我已经将它用于全尺寸背景图像，但我确信它也可以用于轮播。请参阅http://css-tricks.com/perfect-full-page-background-image/，更改课程以满足您的需求。

$(window).load(function() {    

    var theWindow        = $(window),
        $bg              = $("#bg"),
        aspectRatio      = $bg.width() / $bg.height();

    function resizeBg() {

        if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
            $bg
                .removeClass()
                .addClass('bgheight');
        } else {
            $bg
                .removeClass()
                .addClass('bgwidth');
        }

    }

    theWindow.resize(resizeBg).trigger("resize");

});

【讨论】：