引导轮播图像大小

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-itemmax-height 设置为视口高度的最大90%,这似乎是您所追求的。

显然,您可以将其调整为对您的项目有意义的任何内容(可能是85vh?)。

【讨论】:

谢谢,安德烈。我已经尝试过您的解决方案,但它不起作用:-/ imgur.com/a/RqTWUWd 不起作用兄弟,我认为将您的答案更改为.carousel-fade .carousel-item img 应该可以吗? 我明白你的意思。我没有注意到它正在裁剪图像。您需要将相同的max-height 应用于图像:.carousel-item &gt; img max-height: 90vh 更新了答案。干杯! 再次感谢安德烈。我认为它有效。我已将代码更改为: 没有 w-100 是的。那个讨厌的w-100 在那里没有生意。我个人认为,当 Bootstrap 决定使用 !importants 时,一切都错了。在以前的版本中使用它要容易得多。

以上是关于引导轮播图像大小的主要内容,如果未能解决你的问题,请参考以下文章

使引导轮播对高度做出响应

Rails 应用程序中的引导轮播,显示所有图像,不显示缩略图。在轮播中显示数据库中的图像

你如何改变引导轮播控制链接的大小?

点击时如何更改引导轮播上的图像?

如何裁剪 twitter 引导轮播图像

在引导轮播中使用图像而不是幻灯片背景