根据屏幕尺寸调整 bootstrap 轮播的宽度和高度

Question

我有一个像这样的 bootstrap 轮播

<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 到一个容器，在你的情况下 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/

根据屏幕尺寸调整 bootstrap 轮播的宽度和高度

resizing the width and height of the bootstrap carousel with the screen size

html

css

carousel

twitter-bootstrap