twitter-bootstrap - 如何缩放轮播中的图像？

Question

我已经构建了一个轮播，如果图像的宽度大于高度，我希望图像在一维宽度上最大化屏幕，反之亦然。

最大高度应该为页眉/导航栏和页脚留出空间，并且我希望它们按比例缩放。目前，它们正在缩放到宽度，但它们在垂直方向上极大地溢出了视口(viewport)。

HTML:

<div id="frontimages" class="carousel slide" data-ride="carousel">

    <ul class="carousel-indicators">
        <li data-target="#frontimages", data-slide-to="0" class="active"></li>
    </ul>

    <div class="carousel-inner">
        <div class="carousel-item active">
            <img class="d-block img-fluid" src="url" alt="title">
        </div>
    </div>

    <a class="carousel-control-prev" href="#frontimages" data-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </a>

    <a class="carousel-control-next" href="#frontimages" data-slide="next">
        <span class="carousel-control-next-icon"></span>
    </a>

</div>

CSS:

.carousel-inner img {
    width: 100%;
    height: 100%;
}

Answer 1

如果您希望每个图像覆盖整个轮播元素，您可以这样做:

.carousel-item {
  width: 100%;
  height: 300px; /* example */
}

.carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

或者，使用背景图像，而不是固定高度，您也可以使其响应:

<div class="carousel-item" style="background-image:url('url');"></div>

---

.carousel-item {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.carousel-item:before {
  content: "";
  display: block;
  padding-bottom: 56.25%; /* example */
}

---

纵横比表:

aspect ratio  | padding-bottom value
--------------|----------------------
    16:9      |       56.25%
    4:3       |       75%
    3:2       |       66.66%
    8:5       |       62.5%

https://stackoverflow.com/a/10441480/483779