如何将纵向图像放入带有横向图像的引导轮播？答案

【问题标题】：How to fit portrait image into bootstrap carousel with landscape ones?如何将纵向图像放入带有横向图像的引导轮播？
【发布时间】：2021-01-07 00:14:07
【问题描述】：

我有一个引导轮播示例，其中包含 2 个横向（宽度大于高度）和 1 个纵向（高度大于宽度）图像。由于头像比其他人高，它会导致如下所示的溢出

风景一

肖像一

我希望那个肖像看起来像下面（与其他人一样放入容器并居中）除了我的旋转木马，因此响应式工作

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

需要

<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <style>
  /* Make the image fully responsive */
  .carousel-inner img {
    width: 100%;
    height: 100%;
  }
  </style>
</head>
<body>

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

  <!-- Indicators -->
  <ul class="carousel-indicators">
    <li data-target="#demo" data-slide-to="0" class="active"></li>
    <li data-target="#demo" data-slide-to="1"></li>
    <li data-target="#demo" data-slide-to="2"></li>
  </ul>
  
  <!-- The slideshow -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://lh3.googleusercontent.com/proxy/EYt1aGhp1AefOl1X9LbPivgHNrOKjxTvjO7F4290TG3zufR-TId_B9z05719q1vKMwA0pEMlW-nLJlr-lUp0bxkeC3A96LHUjH64U-2pjF8Yotym" alt="Los Angeles">
    </div>
    <div class="carousel-item">
      <img src="https://i.pinimg.com/736x/d1/a6/64/d1a664bca214bf785a293cbc87950fc4--jeff-bridges-male-photography.jpg" alt="Chicago">
    </div>
    <div class="carousel-item">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSx7rAWWd5FIGTykriWl1WAKKZFwG9ieWI1aA&usqp=CAU" alt="New York">
    </div>
  </div>
  
  <!-- Left and right controls -->
  <a class="carousel-control-prev" href="#demo" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#demo" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>
</div>

</body>
</html>

【问题讨论】：

标签： javascript html css bootstrap-carousel

【解决方案1】：

如果您将图像作为背景图像而不是 img 放置到其包含的 div 中，系统将自动调整大小和位置，以便它们适合您 - 如果用户调整窗口大小，图像将相应调整大小（目前如果窗口变窄，图像会被“压扁”）。

包含图像的 div 的 CSS 可以添加以下内容：

  div.carousel-item {
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat no-repeat;
    width: 100%;
    height: 100%;
  }

还有这个

<div class="carousel-item">
  <img src="https://i.pinimg.com/736x/d1/a6/64/d1a664bca214bf785a293cbc87950fc4--jeff-bridges-male-photography.jpg" alt="Chicago">
</div>

变成

<div class="carousel-item" style="background-image="url(https://i.pinimg.com/736x/d1/a6/64/d1a664bca214bf785a293cbc87950fc4--jeff-bridges-male-photography.jpg);">
</div>

这是在我的 Window 10 笔记本电脑上运行的完整代码：

<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <style>
  /* Make the image fully responsive */
  .carousel-inner img {
    width: 100%;
    height: 100%;
  }
  
  div.carousel-item {
  background-size:contain;
  background-position:center center;
  background-repeat:no-repeat no-repeat;
  width:100%;
  height:100%;
  }
  </style>
</head>
<body>

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

  <!-- Indicators -->
  <ul class="carousel-indicators">
    <li data-target="#demo" data-slide-to="0" class="active"></li>
    <li data-target="#demo" data-slide-to="1"></li>
    <li data-target="#demo" data-slide-to="2"></li>
  </ul>
  
  <!-- The slideshow -->
  <div class="carousel-inner">
    <div class="carousel-item active" style="background-image:url(https://lh3.googleusercontent.com/proxy/EYt1aGhp1AefOl1X9LbPivgHNrOKjxTvjO7F4290TG3zufR-TId_B9z05719q1vKMwA0pEMlW-nLJlr-lUp0bxkeC3A96LHUjH64U-2pjF8Yotym);" alt="Los Angeles">
    </div>
    <div class="carousel-item" style="background-image:url(https://i.pinimg.com/736x/d1/a6/64/d1a664bca214bf785a293cbc87950fc4--jeff-bridges-male-photography.jpg);" alt="Chicago">
    </div>
    <div class="carousel-item" style="background-image:url(https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSx7rAWWd5FIGTykriWl1WAKKZFwG9ieWI1aA&usqp=CAU);" alt="New York">
    </div>
  </div>
  
  <!-- Left and right controls -->
  <a class="carousel-control-prev" href="#demo" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#demo" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>
</div>

</body>
</html>

【讨论】：

那么，这怎么可能是答案？建议可以放在 cmets 中
@Sandrin Joy 很抱歉，我不明白您的评论。如果我显示的更改是按照要求的问题进行的轮播工作 - 肖像图像不会溢出和居中。
我应用了你的更改但没有用。你能想出小提琴吗？
我已将完整的代码放在答案的末尾。它在我的 Windows10 笔记本电脑上运行。我也会在其他一些设备上试试。您使用的是什么浏览器/系统 - 我会尝试找出任何问题。
我也把代码放在了我的网站上——让我知道它是否适合你。它位于 [链接]ahweb.org.uk/testslider.html

【解决方案2】：

我已将第二张图像居中而不使用缩放

.mx-auto .d-block 引导类

对于其他 2 张图片，我做了全尺寸

using `.w-100 class` & `height:100vh`

这里的高度是您需要的旋转高度。

这是我从您所需的输出中了解到的。

  .carousel-inner img {
      width: auto;
      height: 100vh;
  }
  .carousel
  {
    height: 100vh;
    width: 100vw;
  }

<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
 
</head>
<body>
<div  class="carousel slide bg-dark" id="mine" data-ride="carousel">
                     <ul class="carousel-indicators">
    <li data-target="#mine" data-slide-to="0" class="active"></li>
    <li data-target="#mine" data-slide-to="1"></li>
    <li data-target="#mine" data-slide-to="2"></li>
  </ul>
                <div class="carousel-inner">
                    <div class="carousel-item active">
                                <img src="https://lh3.googleusercontent.com/proxy/EYt1aGhp1AefOl1X9LbPivgHNrOKjxTvjO7F4290TG3zufR-TId_B9z05719q1vKMwA0pEMlW-nLJlr-lUp0bxkeC3A96LHUjH64U-2pjF8Yotym"  class="img-fluid w-100">
                                
                    </div>
                    <div class="carousel-item">
                                <img src="https://i.pinimg.com/736x/d1/a6/64/d1a664bca214bf785a293cbc87950fc4--jeff-bridges-male-photography.jpg "  class="img-fluid mx-auto d-block">

                    </div>
                    <div class="carousel-item">
                                <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSx7rAWWd5FIGTykriWl1WAKKZFwG9ieWI1aA&usqp=CAU"  class="img-fluid w-100">

                    
                    </div>
                </div>
                <a class="carousel-control-next" href="#mine" data-slide="next">
                    <span class="carousel-control-next-icon"></span>
                </a>
                <a class="carousel-control-prev" href="#mine" data-slide="prev">
                    <span class="carousel-control-prev-icon"></span>
                </a>
            </div>
</body>
</html>

我建议将所有图像作为第二张居中。因为拉伸看起来不太好

.carousel-inner img {
      width: auto;
      height: 100vh;
  }
  .carousel
  {
  
    height: 100vh;
    width: 100vw;
  }

<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
 
</head>
<body>
<div  class="carousel slide" id="mine" data-ride="carousel">
                     <ul class="carousel-indicators">
    <li data-target="#mine" data-slide-to="0" class="active"></li>
    <li data-target="#mine" data-slide-to="1"></li>
    <li data-target="#mine" data-slide-to="2"></li>
  </ul>
                <div class="carousel-inner">
                    <div class="carousel-item active">
                                <img src="https://lh3.googleusercontent.com/proxy/EYt1aGhp1AefOl1X9LbPivgHNrOKjxTvjO7F4290TG3zufR-TId_B9z05719q1vKMwA0pEMlW-nLJlr-lUp0bxkeC3A96LHUjH64U-2pjF8Yotym"  class="img-fluid mx-auto d-block">
                                
                    </div>
                    <div class="carousel-item">
                                <img src="https://i.pinimg.com/736x/d1/a6/64/d1a664bca214bf785a293cbc87950fc4--jeff-bridges-male-photography.jpg "  class="img-fluid mx-auto d-block">

                    </div>
                    <div class="carousel-item">
                                <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSx7rAWWd5FIGTykriWl1WAKKZFwG9ieWI1aA&usqp=CAU"  class="img-fluid mx-auto d-block">

                    
                    </div>
                </div>
                <a class="carousel-control-next" href="#mine" data-slide="next">
                    <span class="carousel-control-next-icon"></span>
                </a>
                <a class="carousel-control-prev" href="#mine" data-slide="prev">
                    <span class="carousel-control-prev-icon"></span>
                </a>
            </div>
</body>
</html>

【讨论】：

但我建议让所有图像都像第二张一样居中，并使左侧部分透明，因为拉伸看起来永远不会很好。
不幸的是，如果窗口大小不是图像的初始纵横比，这会“挤压”图像。例如，黄色的汽车在小sn-p窗口上看起来太长太瘦了。这意味着，例如，如果用户更改浏览器上的窗口大小，则图像会失真（这是 background-image 与 img 元素相反的好处 - 系统会自动为您调整大小以使滑块在所有设备上响应.
@AHaworth 查看评论
这在视口处于横向模式时有效，但在纵向时图像会被“挤压”（例如，如果用户正在使用手机）。对于这个特定的问题，这可能重要也可能不重要，但如果一个人试图拥有一个完全响应的网站，这很重要。