Bootstrap carousel - 在更改设备高度和宽度时防止图像被裁剪

Question

我正在尝试添加像 airbnb example 这样的引导轮播。轮播应在所有设备尺寸下保持响应。我试图为轮播容器和图像提供恒定的高度和宽度。但是，如果视口高度或宽度太小，图像会被裁剪。

我希望该功能与 Airbnb 轮播完全一样。无论视口尺寸如何，图像都不会被裁剪。用户可能需要进行垂直滚动，但图像是完整可见的，并且具有正确的纵横比。

如果图片是横向类型的（例如 1000x200），它应该分布在整个宽度上。顶部和底部区域应有黑色边框。

同样，如果图像是纵向类型（例如 200x1000），它应该分布在整个高度上。左右区域应该有黑色边框。这是我的代码，也粘贴在jsfiddle 上。 （这里是rendered version of jsfiddle）：

@media screen and (min-width: 500px) {
  .commonattr {
    min-width: 100%;
  }
}

@media screen and (min-width: 768px) {
  .commonattr {
    min-width: 400px;
  }
}

@media screen and (max-height: 400px) {
  .carouseltest {
    height: 60vh;
  }
}

.cardcontainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
}

.carouselcontainer {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  object-fit: contain;
  /* max-width: none; */
  width: max-content;
}

#carouselExampleIndicators {
  /* min-width: 300px; */
  width: 100vw;
  margin: 0 auto
}

#carousel-bg {
  background-color: black;
}

.carousel-item {
  z-index: 2;
  object-fit: cover;
}

.carouseltest {
  z-index: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 1)0%, rgba(0, 0, 0, 0.8)10%, rgba(0, 0, 0, 0)30%);
  box-sizing: border-box;
  /* height: 600px; */
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80vh;
}

.theimage {
  z-index: -1;
  width: 100%;
}

@media screen and (min-width: 420px) {
  #carouselExampleIndicators {
    background: white;
    display: flex;
    width: 25vw;
    height: 100%;
    flex-direction: column;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div class="cardcontainer">
  <div class="carouselcontainer commonattr">
    <div class="carouselslidecontainer commonattr">
      <div id="carouselExampleIndicators" class="carousel slide commonattr" data-ride="carousel" data-interval="false">
        <ol class="carousel-indicators">
          <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active w-100"></li>
          <li data-target="#carouselExampleIndicators" data-slide-to="1" class="w-100"></li>
        </ol>
        <div class="carousel-inner" role="listbox" id="carousel-bg">
          <div class="carousel-item item active">
            <div class="carouseltest">
              <img class="theimage" src="images/8.jpg" alt="First slide">
            </div>
          </div>
          <div class="carousel-item item ">
            <div class="carouseltest">
              <img class="theimage" src="images/600x100.png" alt="Second slide">
            </div>
          </div>
        </div>

        <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>

    </div>

  </div>
</div>

我们的问题页面截图：

• Page 1

我们正在尝试制作这样的 Airbnb 示例：

• Page 1
• Page 2

这些是来自Airbnb 网站的一些图片。

Answer 1

尝试在您的图像上添加类 .img-fluid。它将防止裁剪图像。

参考这里https://getbootstrap.com/docs/4.4/content/images/#responsive-images

更新： 在CSS下面添加它会起作用

.theimage{
  object-fit: cover;
  height:100%;
  width:100%;
}

这里的例子https://jsfiddle.net/imam_san/wt7zsjan/9/