引导轮播图像大小
Posted
技术标签:
【中文标题】引导轮播图像大小【英文标题】:Bootstrap carousel image size 【发布时间】:2019-06-21 18:11:39 【问题描述】:您好,轮播图像的大小存在响应问题,其中 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" >
</div>
<div class="carousel-item">
<img src="img/refugio/02.jpg" class="d-block w-100" >
</div>
<div class="carousel-item">
<img src="img/refugio/03.jpg" class="d-block w-100" >
</div>
<div class="carousel-item">
<img src="img/refugio/04.jpg" class="d-block w-100" >
</div>
<div class="carousel-item">
<img src="img/refugio/05.jpg" class="d-block w-100" >
</div>
<div class="carousel-item">
<img src="img/refugio/06.jpg" class="d-block w-100" >
</div>
<div class="carousel-item">
<img src="img/refugio/07.jpg" class="d-block w-100" >
</div>
<div class="carousel-item" align="center">
<img src="img/refugio/08.jpg" class="d-block img-fluid" >
</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"
任何帮助将不胜感激:-)
提前致谢, 路易斯
【问题讨论】:
【参考方案1】:.carousel-fade .carousel-item, .carousel-item img
max-height: 90vh;
修复它。它只是将任何.carousel-item
的max-height
设置为视口高度的最大90%,这似乎是您所追求的。
显然,您可以将其调整为对您的项目有意义的任何内容(可能是85vh
?)。
【讨论】:
谢谢,安德烈。我已经尝试过您的解决方案,但它不起作用:-/ imgur.com/a/RqTWUWd 不起作用兄弟,我认为将您的答案更改为.carousel-fade .carousel-item img
应该可以吗?
我明白你的意思。我没有注意到它正在裁剪图像。您需要将相同的max-height
应用于图像:.carousel-item > img max-height: 90vh
更新了答案。干杯!
再次感谢安德烈。我认为它有效。我已将代码更改为: 没有 w-100
是的。那个讨厌的w-100
在那里没有生意。我个人认为,当 Bootstrap 决定使用 !important
s 时,一切都错了。在以前的版本中使用它要容易得多。以上是关于引导轮播图像大小的主要内容,如果未能解决你的问题,请参考以下文章