Question

Bootstrap carousel项可以适合移动设备的垂直屏幕。但是我的图像很宽，并且使用以下代码在移动设备上无法很好地缩放：

HTML：

<div class="item">
  <img class="First-slide" src="images/bg01.jpg" alt="First slide">

</div>

CSS：

.carousel .item {
  height: 500px;
  background-color: #777;
}
.carousel-inner > .item > img {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 100%;
  height: 500px;
}

如何使用CSS仅显示移动垂直视图的部分图像（中/左/右 - 如此visual example）？

Answer 1

使用object-fit:cover进行最佳自动调整（100％区域填充，保持纵横比并在必要时进行裁剪）。它需要一个带overflow:hidden的投币器。由于您使用的是具有绝对位置的图像，因此您还需要在容器上添加position:relative。

.carousel .item {
  height: 500px;
  background-color: #777;
  object-fit: cover;
  overflow: hidden;
  position: relative;
}

响应宽的图像垂直适合 - Bootstrap

1 个答案: