html - 制作一个好的图像轮播

Question

我的网站上有一个图片轮播作为标题。问题是图像在 4:3 显示器上有很好的剪裁，在一些图像上 1080p 的剪裁很糟糕，1440p 的剪裁非常糟糕。我该怎么做才能解决这个问题？例如，如果视口(viewport)变大，我如何选择显示的图片区域并将其缩放得更大。

如果您调整浏览器的大小，您就会明白我的意思。

Ps:如果通过此代码片段查看，您必须全屏。最好访问 my website here (port 3000) .

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div id="carouselExampleIndicators" class="carousel slide carousel-fade" data-ride="carousel" data-interval="10000" data-pause="false">
            <ol class="carousel-indicators">
              <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
              <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
              <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
              <li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
              <li data-target="#carouselExampleIndicators" data-slide-to="4"></li>
            </ol>
            <div class="carousel-inner" style="overflow: hidden; width: 100%; height: 500px">
              <div class="carousel-item active">
                <img class="d-block w-100" src="https://i.imgur.com/jHM0Qfx.jpg" alt="First slide">
              </div>
              <div class="carousel-item">
                <img class="d-block w-100" src="https://i.imgur.com/4jCNs81.jpg" alt="Second slide">
              </div>
              <div class="carousel-item">
                <img class="d-block w-100" src="https://i.imgur.com/PbIngUg.jpg" alt="Third slide">
              </div>
              <div class="carousel-item">
                <img class="d-block w-100" src="https://i.imgur.com/DU4B2kz.jpgg" alt="Third slide">
              </div>
              <div class="carousel-item">
                <img class="d-block w-100" src="https://i.imgur.com/XYBEDye.jpg" alt="Third slide">
              </div>
            </div>
          </div>

Answer 1

css object-fit: cover 绝对是你最好的 friend !

不要忘记在图像和容器之间设置元素以覆盖轮播的容器，瞧:

.carousel-item {
  width: 100%;
  height: 100%;
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div id="carouselExampleIndicators" class="carousel slide carousel-fade" data-ride="carousel" data-interval="10000" data-pause="false">
            <ol class="carousel-indicators">
              <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
              <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
              <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
              <li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
              <li data-target="#carouselExampleIndicators" data-slide-to="4"></li>
            </ol>
            <div class="carousel-inner" style="overflow: hidden; width: 100%; height: 500px">
              <div class="carousel-item active">
                <img class="d-block w-100" src="https://i.imgur.com/jHM0Qfx.jpg" alt="First slide">
              </div>
              <div class="carousel-item">
                <img class="d-block w-100" src="https://i.imgur.com/4jCNs81.jpg" alt="Second slide">
              </div>
              <div class="carousel-item">
                <img class="d-block w-100" src="https://i.imgur.com/PbIngUg.jpg" alt="Third slide">
              </div>
              <div class="carousel-item">
                <img class="d-block w-100" src="https://i.imgur.com/DU4B2kz.jpgg" alt="Third slide">
              </div>
              <div class="carousel-item">
                <img class="d-block w-100" src="https://i.imgur.com/XYBEDye.jpg" alt="Third slide">
              </div>
            </div>
          </div>