[英]Bootstrap carousel setting auto height
Is there a way to not set a height for the bootstrap carousel and let it work out the height automatically based on the image width being set at 100%? 有没有一种方法可以不为引导传送带设置高度,而是让其根据图像宽度设置为100%自动计算出高度? I understand it will bounce up and down in between slides which is fine. 我知道它会在幻灯片之间上下反弹,这很好。 Currently for the bootstrap html I have: 目前对于bootstrap html我有:
<div id="carousel" class="carousel slide carousel-fade" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<div class="slider-image img-responsive " style="background-image: url(/folder/image.png); background-position: 50% 50%; background-size: cover;"></div>
</div>
</div>
</div>
With CSS: 使用CSS:
#carousel, .item, .slider-image {
height: auto;
width: 100%;
}
With this I can't see image at all - it just sets the height to 0. Any ideas? 这样我根本看不到图像-它只是将高度设置为0。有什么想法吗?
this code worked for me : 这段代码对我有用:
.carousel-inner {
height:auto;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 100%;
margin: auto;
min-height:initial;
}
if you want to resize image you can add a css class to target image Good Luck 如果要调整图像的大小,可以向目标图像添加一个CSS类,祝您好运
Instead of using a div and a background just put the image in the slide with the image tag and set the image width to 100% 无需使用div和背景,只需将带有图像标签的图像放入幻灯片中,并将图像宽度设置为100%
HTML: HTML:
<div id="carousel" class="carousel slide carousel-fade" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<img src="path/to/image.jpg"/>
</div>
</div>
</div>
CSS: CSS:
#carousel .item img{
width:100%;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.