如何使 Bootstrap Carousel 中的图像具有响应性?
Posted
技术标签:
【中文标题】如何使 Bootstrap Carousel 中的图像具有响应性?【英文标题】:How to make images in Bootstrap Carousel responsive? 【发布时间】:2014-09-22 17:10:06 【问题描述】:有没有办法让您的图像在引导程序的轮播中以固定高度响应?我什么都试过了。我还使用了 img-responsive,并且在 CSS 中我也尝试了所有方法。
这是我的html
<div class="item active">
<img src="images/slide1.jpg" class="img-responsive">
<div class="container">
<div class="carousel-caption" style="padding-bottom:90px;">
<h1>Totes for all</h1>
<p>Personalize your style</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">View all</a></p>
</div><!-- /.carousel-caption -->
</div><!-- /.container -->
</div><!-- /.item -->
<div class="item">
<img src="images/slide2.png" class="img-responsive">
<div class="container">
<div class="carousel-caption">
<div class="caption_background">
<h1>Pattern it</h1>
<p>Choose your favorite</p>
</div>
<p><a class="btn btn-lg btn-primary" href="#" role="button">View all</a></p>
</div><!-- /.carousel-caption -->
</div><!-- /.container -->
</div><!-- /.item -->
</div><!-- /.carousel-inner -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div><!-- /.myCarousel -->
这是我的 CSS
http://paste.ubuntu.com/7908633/
【问题讨论】:
如果您尝试了所有方法,那么不,没有办法...除非您没有尝试所有方法,否则请告诉我们您尝试了什么以及失败了什么。好读:***.com/help/how-to-ask 谢谢@gmo!这是我的 CSS paste.ubuntu.com/7908633 @gmo 如果我不能解决这个问题,我几乎想在 xs 分辨率下用 jumbotron 替换旋转木马。但必须有办法!! How to make bootstrap carousel image responsive? 的可能副本 【参考方案1】:试试这个 jq,它使你的 .carousel-inner 成为窗口高度。但请记住 - 高度您的导航栏,页脚等。您必须的所有其他元素/ div 高度 -.
function init_carousel()
H = +($(window).height() /* -height here */); // or $('.carousel-inner') as you want ...
$('.carousel-inner').css('height', H + 'px');
window.onload = init_carousel;
init_carousel();
【讨论】:
【参考方案2】:试试这个 bootsnip http://bootsnipp.com/snippets/featured/simple-responsive-carousel。这是一个很好的网站,可以提供一些有用的复制粘贴 snippets
以进行引导。
【讨论】:
【参考方案3】:我知道这对派对来说有点晚了,但我最近遇到了这个问题,并通过为每个项目提供自己的 ID,然后将图像设置为元素作为 CSS 中的背景图像来克服它...
<div id="header-carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div id="cazza1" class="item active">
</div>
<div id="cazza2" class="item">
</div>
<div id="cazza3" class="item">
</div>
</div>
</div>
还有 CSS:
#header-carousel
height: 240px;
#cazza1
height: 240px;
background-image: url(/images/header1.jpg);
background-position: center center;
background-size: cover;
#cazza2
height: 240px;
background-image: url(/images/header2.jpg);
background-position: center center;
background-size: cover;
#cazza3
height: 240px;
background-image: url(/images/header3.jpg);
background-position: center center;
background-size: cover;
【讨论】:
以上是关于如何使 Bootstrap Carousel 中的图像具有响应性?的主要内容,如果未能解决你的问题,请参考以下文章
如何跳转到 Bootstrap 的 Carousel 中的特定项目? [复制]
滑动时React Bootstrap Carousel滚动顶部
Bootstrap 4 carousel-control-color 条件颜色 - SVG