您好,在轮播图片的尺寸调整中有一个响应问题,其中有7个为水平尺寸(1800x1200),但其中一个-最后一个-为垂直尺寸,我无法适当地编码以使其具有响应性:>
https://www.luismatera.art/refugio.html
轮播代码为:
<div class="row">
<div class="col-md-1 hidden-xs"></div>
<div class="col-md-10 col-xs-12 col-sm-12">
<div id="carouselExampleControls" class="carousel slide carousel-fade" data-ride="carousel" data-interval="10000">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/refugio/01.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="img/refugio/02.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="img/refugio/03.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="img/refugio/04.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="img/refugio/05.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="img/refugio/06.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="img/refugio/07.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item" align="center">
<img src="img/refugio/08.jpg" class="d-block img-fluid" alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<p>Proyecto abierto</p>
<p align="right">Asturias · 2017/18</p>
</div>
<div class="col-md-1 hidden-xs"></div>
</div>
我已将 class =“ d-block w-100 ”替换为 class =“ d-block img-fluid”
任何帮助将不胜感激:-)
预先感谢, 路易斯
答案 0 :(得分:2)
.carousel-fade .carousel-item, .carousel-item img {
max-height: 90vh;
}
修复它。只需将任何max-height
中的.carousel-item
设置为最大视口高度的90%,这似乎就是您要追求的。
很显然,您可以将其调整为对您的项目有意义的任何内容(也许是85vh
?)。