twitter-bootstrap – Twitter Bootstrap carousel不同高度的图

发布时间：2020-12-17 23:57:59 所属栏目：安全来源：网络整理

导读：我一直在使用Bootstrap的旋转木马类，它已经直到目前为止，但我有一个问题是，不同的高度的图像导致箭头反弹上下调整到新的高度。这是我用于我的轮播的代码： div id="myCarousel" class="carousel slide" div class="carousel-inner" div class="item acti

我一直在使用Bootstrap的旋转木马类，它已经直到目前为止，但我有一个问题是，不同的高度的图像导致箭头反弹上下调整到新的高度。

这是我用于我的轮播的代码：

<div id="myCarousel" class="carousel slide">
    <div class="carousel-inner">
        <div class="item active">
            <img src="image_url_300height"/>
            <div class="carousel-caption">
                <h4>...</h4>
                <p>...</p>
            </div>
        </div>
        <div class="item">
            <img src="image_url_700height" />
        </div>
    </div>
    <!-- Carousel nav -->
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
    <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

问题也在这个jsfiddle(不可否认，我发现这是一个单独的问题，同时试图解决这个问题！)

我的问题是：如何强制旋转木马保持在固定的高度(小提琴的第二个缩略图)和中心较小的图像，同时保持字幕和箭头在相对于旋转木马的静态位置？

解决方法

它看起来较少bootstrap / CSS强制自动高度，以避免拉伸图像时，宽度必须更改为响应。我切换它，使宽度自动和固定的高度。

<div class="item peopleCarouselImg">
  <img class="peopleCarouselImg" src="http://upload.wikimedia.org/...">
  ...
</div>

然后我定义img类的personCarouselImg像这样：

.peopleCarouselImg img {
  width: auto;
  height: 225px;
  max-height: 225px;
}

我把我的高度固定为225px。我让宽度自动调整，以保持高宽比正确。

这似乎对我有用。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!