Question

我的网站上有一个图片轮播作为标题。问题在于，使用4：3显示器时，图像的剪切效果很好，在一些图像上，1080p的剪切效果不好，而1440p的剪切效果很差。我该怎么做才能解决此问题？例如，如果视口变大，我该如何选择显示的图片区域并放大该区域。

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

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绝对是您最好的朋友！

别忘了在图像和容器之间设置元素，以覆盖caroussel的容器和瞧！

.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>

Answer 2

幻灯片/轮播的最佳示例

A Good Slideshow Using HTML, JS

Carousel Using Bootstrap

制作好图像轮播

2 个答案: