我有一个填满整个浏览器窗口的 Bootstrap 轮播,我想让图像适合整个轮播。我完成了填充并保持正确的纵横比部分。
代码:
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Carousel indicators -->
<ol class="carousel-indicators" id = "indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active">
<div class = "im">
<img src = "images/image.jpg">
<div class="carousel-caption">
<h3>First slide label</h3>
<h6>Lorem ipsum dolor sit amet consectetur…</h6>
</div></div>
</div>
<div class="item">
<div class = "im">
<img src = "images/image2.jpg">
<div class="carousel-caption">
<h3>Second slide label</h3>
<h6>Aliquam sit amet gravida nibh, facilisis gravida…</p>
</div></div>
</div>
<div class="item">
<div class = "im">
<img src = "images/image3.jpg">
<div class="carousel-caption">
<h3>Third slide label</h3>
<h6>Praesent commodo cursus magna vel…</h6>
</div></div>
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
CSS:
.im {
height: 100%;
width: 100%;
background-color: red;
float: left;
overflow: hidden;
position:relative;
}
.im img {
min-width: 100%;
min-height: 100%;
}
#indicators {
padding-bottom: 30px;
}
但是,问题是图像没有居中,在较小的屏幕上看起来有点奇怪,因为您看到的只是背景的一部分,而不是主要图形。
有什么想法吗?
编辑:
这是一个 JSFiddle:http://jsfiddle.net/461q48by/ 如您所见,图像适合并且纵横比保持不变,但图像偏离中心,您只能看到 Frog 的脚。
最佳答案
- 修正语法错误。
- 取出多余的
</div>
的 - 动闭幕
</div>
对于 myCarousel div 到轮播的末尾。轮播包括轮播导航区域。
然后弄乱你的 CSS 但这应该会解决它。
关于css - 在 Bootstrap 轮播中将图像居中,同时保持纵横比并填充整个轮播?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26198590/