bootstrap 4转盘高度相同，适用于不同的图像大小和屏幕尺寸

ds97pgxw 于 2022-12-08 发布在 Bootstrap

关注(0)|答案(4)|浏览(184)

这里是一个来自w3schools的旋转木马示例。

<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="la.jpg" alt="Los Angeles">
    </div>
    <div class="carousel-item">
      <img src="chicago.jpg" alt="Chicago">
    </div>
    <div class="carousel-item">
      <img src="ny.jpg" 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>

为了使carousel具有响应性，我在css中添加了以下内容：

.carousel-item-next, .carousel-item-prev, .carousel-item.active {
    display: block !important;
}

在我的网站，我有几个图像有相同的尺寸（高度300px和宽度600px），除了只有一个他们有高度300px和宽度300px）。

.carousel-item>img{
    max-height: 300px;
}

这样，当图像在转盘中滑动时，它们具有相同高度。
但当我调整页面大小，或在较小尺寸的设备上打开它，因为旋转木马是响应，高度降低。但高度是较小的300px宽度的图像和较大的600px宽度的图像。所以当旋转木马幻灯片图像，当达到300x300图像的高度增加，当达到600x600图像的高度降低。
我如何让旋转木马的高度对所有图像、所有尺寸都相似？

twitter-bootstrap

来源：https://stackoverflow.com/questions/52421025/bootstrap-4-carousel-same-height-for-different-image-sizes-and-screen-dimensions

4条答案

按热度按时间

bt1cpqcv1#

对我来说，一个很好的解决方案是为媒体查询设置一个最大高度。

@media (max-width: 688px) {
    .carousel-item>img {
        max-height: 146px;
    }
}

为了获得最大高度值，我引用了inspect元素。

赞(0）回复(0）举报 2022-12-08

5f0d552i2#

对于那些希望在bootstrap 5.2.0中执行此操作的用户，以下是一个答案：

<div class="carousel-inner">
  <div class="carousel-item active">
    <div class="d-flex justify-content-center align-items-center" style="height: 300px">
      <img src="..." class="h-100 w-auto" alt="...">
    </div>
  </div>
  ...
</div>

赞(0）回复(0）举报 2022-12-08

r6l8ljro3#

这是一个很好的例子，使用jQuery：
https://codepen.io/mohan-aiyer/pen/MzgvbN
//将所有轮播项目设置为相同高度函数carouselNormalization（）{

window.heights = [], //create empty array to store height values
    window.tallest; //create variable to make note of the tallest slide
    
    function normalizeHeights() {
        jQuery('.parab .carousel-inner .carousel-item').each(function() { //add heights to array
            window.heights.push(jQuery(this).outerHeight());
        });
        window.tallest = Math.max.apply(null, window.heights); //cache largest value
        jQuery('.parab .carousel-inner .carousel-item').each(function() {
            jQuery(this).css('min-height',tallest + 'px');
        });
    }
    normalizeHeights();

    jQuery(window).on('resize orientationchange', function () {
        
        window.tallest = 0, window.heights.length = 0; //reset vars
        jQuery('.parab .carousel-inner .carousel-item').each(function() {
            jQuery(this).css('min-height','0'); //reset min-height
        }); 
        
        normalizeHeights(); //run it again 

    });
    
}

jQuery( document ).ready(function() {
    carouselNormalization();
});

赞(0）回复(0）举报 2022-12-08

kxeu7u2r4#

我发现，解决这个问题的最好方法是确保将所有图像裁剪为相同的大小，从而使图像适合所有屏幕大小。
我用这个在线工具https://pixlr.com/editor/ .
通过选择裁剪图标，然后选择纵横比并裁剪为1200x480来裁剪我的图像。
我的问题解决了。

赞(0）回复(0）举报 2022-12-08