Question

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

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

Answer 1

我建议你使用身高而不是 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中，我喜欢的图像不是同一个高度

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

1 个答案: