Bootstrap轮播图像在移动视图中的高度不同答案

【问题标题】：Bootstrap carousel images not same height in mobile viewBootstrap轮播图像在移动视图中的高度不同
【发布时间】：2017-11-10 20:59:29
【问题描述】：

我的页面上有一个引导轮播。我使用的图像具有不同的高度。我希望所有图像都具有相同的高度。为此，我使用了

.carousel{ max-height: 1000px; overflow: hidden; }

我知道它并不完美，但它适用于桌面视图。但是在移动视图中它不起作用，并且图片的高度不同。那么如何使图像在移动视图中具有相同的高度呢？我希望有一个人可以帮助我：）谢谢。

这是我的轮播代码：

<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
  <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
  <li data-target="#myCarousel" data-slide-to="1"></li>
  <li data-target="#myCarousel" data-slide-to="2"></li>
  <li data-target="#myCarousel" data-slide-to="3"></li>
</ol>

<!-- Wrapper for slides -->
<div class="carousel-inner">
  <div class="item active">
    <img src="./img/index/seo.png" alt="Los Angeles" style="width:100%;">
  </div>

  <div class="item">
    <img src="./img/index/security.jpg" alt="Chicago" style="width:100%;">
  </div>

  <div class="item">
    <img src="./img/index/sport.jpg" alt="New york" style="width:100%;">
  </div>

  <div class="item">
    <img src="./img/index/service.png" alt="New york" style="width:100%;">
  </div>
</div>

<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
  <span class="glyphicon glyphicon-chevron-left"></span>
  <span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
  <span class="glyphicon glyphicon-chevron-right"></span>
  <span class="sr-only">Next</span>
</a>
 </div>

【问题讨论】：

向我们展示足够的代码来重现问题。
这样可以吗？还是需要更多？
不同情况下.carousel-inner的大小是多少？
carousel-inner { position: relative; width: 100%; overflow: hidden; }

标签： html css mobile carousel

【解决方案1】：

我建议你使用 height 而不是 max-height 猫头鹰轮播具有响应性，因此无论屏幕宽度是多少，它都会为每个图像添加宽度：100%。并且可能您的图像不会达到 1000px 的高度。所以如果你添加这个代码会更好。

@media only screen and (max-width: 576px) {
   .carousel .carousel-inner .item{
      height: 100px // feel free to add the height you want to use but it's going to change the ratio of your image
   }
}

如果图像的高度不同，我更喜欢将它们作为背景图像 css 属性添加到类项的 div 中

【讨论】：