Twitter Bootstrap:让旋转木马图像全宽全高
Twitter Bootstrap:让旋转木马图像全宽全高
提问于 2013-04-15 21:03:12
这似乎是一个微不足道的问题，但在他们的示例(http://twitter.github.io/bootstrap/examples/carousel.html)中摆弄了几个小时的Twitter Bootstrap carousel之后，我求助于SO来寻求一些帮助。
我希望旋转木马显示完整的宽度(如现在)，但不是裁剪的高度。我试着在不同的容器中将最小高度，高度等设置为100%，但没有结果。有两分钱的吗？
回答 5
Stack Overflow用户
发布于 2015-09-05 00:24:52
对于Bootstrap 3，您需要做的就是：
.carousel img {
min-width: 100%;
}Stack Overflow用户
发布于 2013-05-08 19:06:47
从bootstrap站点上的示例carousel中，如果您调整浏览器窗口的大小，您将看到图像实际上是在x轴上拉伸的。要达到同样的效果，请使用他们的CSS：
.carousel img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;
}最后两个属性min-width和height很重要。将高度设置为轮播的所需大小。
最后，你需要使用img标签来放置你的图片，而不是背景图片。下面是一个完整的示例：
<div class="item">
<img src="image.jpg" />
<div class="container">
<div class="carousel-caption">
<h1>Header</h1>
<p class="lead">This is a caption</p>
<a class="btn btn-large btn-primary" href="#">Large Button</a>
</div>
</div>
</div>我希望这能帮到你。干杯!
Stack Overflow用户
发布于 2014-09-10 12:57:01
我想我已经有了一个简单的CSS更改的解决方案了？只需将以下代码从(OLD)改为；
.carousel {
/*height: 500px; OLD*/
/*margin-bottom: 60px; OLD*/
/*max-width:1200px; THIS IS OPTIONAL (ANY SIZE YOU LIKE)*/
margin:0 auto 60px;
}
.carousel .item {
/*height: 500px; OLD*/
/*background-color: #777; OLD*/
width:100%;
height:auto;
}
.carousel-inner > .item > img {
/*position: absolute; OLD+WHY?*/
/*top: 0; OLD+WHY?*/
/*left: 0; OLD+WHY?*/
min-width:100%;
height:auto;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16015869
复制相关文章
相似问题