使用屏幕尺寸调整引导轮播的宽度和高度

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 我已经尝试了所有SO 解决方案，但似乎没有工作。 如果使用背景上的cover 属性将其设置为背景图像，我可以让它工作，但是如何在<img> 标签上实现这一点？

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 设置为a 容器，在您的情况下为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/