gpt4 book ai didi

css - Bootstrap Carousel 推送和拉取内容

转载 作者:行者123 更新时间:2023-11-28 05:37:50 25 4
gpt4 key购买 nike

我的 Bootstrap 轮播有一些问题。当前其中的图像大小不同,图像之间的切换会推送和拉取页面内容。我想要一个静态高度,并让图片在保持纵横比的同时填充静态高度。我哪里出错了?

这是轮播的代码:

    <header id="main_carousel" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#main_carousel" data-slide-to="0" class="active"></li>
<li data-target="#main_carousel" data-slide-to="1" class=""></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="center-block fill" style="background-color:#6A6A6A" src="sample_house_one.jpg" height="inherit" alt="First slide" >
<div class="carousel-caption">
<h3>Next Esate Sale</h3>
<p>July 8th at 9:00 AM</p>
</div>
</div>
<div class="item">
<img class="center-block fill" style="background-color:#6A6A6A" src="Sample_house_two.jpg" height="inherit" alt="Second slide">
<div class="carousel-caption">
<h3>Congrats to the new owners</h3>
<p>Winning bid olny $65,000!!!</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#main_carousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#main_carousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</header>

这是我在轮播中使用的 css,其他一切都是标准的 Bootstrap 主题和 css:

html,
body {
height: 360px;
}

.carousel {
height: 360px;
}

.carousel-inner > .item img,
.carousel-inner > .item > a > img {
min-height:500px;
max-width: 100%;
}


.item,
.active,
.carousel-inner {
height: 100%;
}


.fill {
width: 100%;
height: 100%;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}


footer {
margin: 50px 0;
}

最佳答案

在您的 img 标签上放置一个 max-height: 500px,这样它就不会随着图片尺寸的不同而缩小或增大。

或者更好的是,去掉 min-height 并只定义 height。如果您的图片被裁剪得很奇怪,您可能想要使用 background-image div 或在图像编辑程序中将它们裁剪为相同的大小和纵横比,以获得最简单的解决方案。由于您使用的是轮播,因此提前裁剪图像可能是最简单的解决方案。

您也可以只允许 div 溢出并隐藏滚动条,并使用 flexbox 将图像定位在中间,使用 align-items: center 来均匀裁剪顶部和底部。

关于css - Bootstrap Carousel 推送和拉取内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38085295/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com