我正在尝试构建一个轮播图,作为我的网站背景图片覆盖物,类似于WordPress中的Revolutionary Slider,但不是插件。我只是为我的静态网站构建它。问题在于我的一些图片具有不同的高度和宽度,因此轮播图不能正确调整。例如,第1张图片是2048 * 3072像素,第2张是3072 * 2048像素,依此类推。我希望我的轮播图的高度和宽度都能达到100%,就像一张覆盖图片。当我将最小宽度和高度设置为100%和100vh时,图片会从底部被裁剪。是否可以提供帮助?以下是我的代码:
<!--carousel-->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-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>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class ="fill"src="img/msp_0409_3522.jpg" alt="Chania">
</div>
<div class="item">
<img class ="fill" src="img/msp_0406_1786.jpg" alt="Chania">
</div>
<div class="item">
<img class ="fill" src="img/msp_1608_9566.jpg" alt="Flower">
</div>
<div class="item">
<img class ="fill" src="img/msp_1605_6918.jpg" alt="Flower">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data- slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"> </span>
<span class="sr-only">Next</span>
</a>
</div>
css
html,body{
height:100%;
}
.carousel,.item,.active{
height:100%;
}
.carousel-inner{
height:100%;
}
.fill{
width:100%;
height:100%;
background-position:center
;background-size:cover;
}
height: 100%
。因为它需要一个参考高度才能正常工作。 - Tumen_theight: 100%;
不需要像素值来继承,但它确实需要在其父元素上设置高度(可以是任何单位),以便它可以计算出某个高度的100%等于多少。 OP在html
和body
上都设置了height: 100%;
。这会导致body
从html
继承,而html
从视口继承。请参考[此工作示例](https://jsfiddle.net/ymern7h3/)。 - hungerstar