Question

我有一个像这样的自助式旋转木马

<div class="container-fluid home">
<div class="row">
    <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 slideshow">
        <div class="carousel slide" data-ride="carousel" data-interval="500">
            <div class="carousel-inner" role="listbox">
                <div class="carousel-item active"> <img class="d-block img-fluid" src="images/image1.jpg" alt="First slide"> </div>
                <div class="carousel-item"> <img class="d-block img-fluid" src="images/image3.jpg" alt="Third slide"> </div>
            </div>
        </div>
    </div>
</div>

我希望根据用户的屏幕尺寸调整轮播图像的大小，就像Louis Vuitton网站一样，主屏幕中的图像here我已经尝试了所有{{1}解决方案，但似乎没有任何工作。如果使用背景上的SO属性将其设置为背景图片，我可以将其设置为可行但如何在cover标记上实现此目的？

PS：使用Bootstrap alpha 6

Answer 1

所以看起来你应该做出以下改变：

.carousel-item-next, .carousel-item-prev, .carousel-item.active {
  display:block;
}

（之前是“display：flex;”）。

这使您的图像可以像普通的100％宽度图像一样运行。

Answer 2

我不建议您使用图像来执行此操作，因为您会使图像失真，这正是您想要的：

var bodyWidth = document.body.clientWidth; 
var bodyHeight = $(window).height();

$(".carousel").each(function(){ 

    $(this).find(".carousel-item img").css({'width':bodyWidth, 'height':bodyHeight});

});

https://jsfiddle.net/xs3wLen6/

如果您不想让图片失真，请将图片用作background-image + background-size:cover，并将javascript width和height设置为容器，在你的情况下container-item。这样的事情（只会在第一次加载时起作用）：

https://jsfiddle.net/xs3wLen6/2/

我建议你的最后一种方法是使用功能的响应式版本：

function ResponsiveCode() {

    var bodyWidth = document.body.clientWidth; 
    var bodyHeight = $(window).height();

    if (bodyWidth)
    {
    //responsive code start
    $(".carousel").each(function(){ 

    $(this).find(".carousel-item").css({'width':bodyWidth, 'height':bodyHeight});

    });
    //responsive code end
  }else{
    window.setTimeout(ResponsiveCode, 30);
  }
}

//first launch
ResponsiveCode();

$(window).bind("load", ResponsiveCode);
$(window).bind("resize", ResponsiveCode);
$(window).bind("orientationchange", ResponsiveCode);

在此测试：https://jsfiddle.net/xs3wLen6/3/

使用屏幕尺寸调整自举旋转木马的宽度和高度

2 个答案: