引导轮播图像尺寸 [英] Bootstrap carousel image size

问题描述

您好，在轮播图片的尺寸调整中有一个响应问题，其中有7个是水平尺寸(1800x1200)，但是其中一个-最后一个-是垂直尺寸，我无法适当地对其进行编码以使其具有响应性:

https://www.luismatera.ar​​t/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"

任何帮助将不胜感激:-)

预先感谢， 路易斯

解决方案

.carousel-fade .carousel-item, .carousel-item img  {
  max-height: 90vh;
}

修复它.只需将任何.carousel-item的max-height设置为最大90％的视口高度即可.

很明显，您可以将其调整为对您的项目有意义的任何内容(也许是85vh?).

Hi have a responsive problem in the sizing of a carousel images, 7 of them are in horizontal size (1800x1200) but one - the last - is in vertical and I can't code it propertly to have it responsive:

https://www.luismatera.art/refugio.html

Code for carousel is:

            <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>

I have replaced class="d-block w-100" with class="d-block img-fluid"

Any help will be appreciated :-)

Thanks in advance, Luis

解决方案

.carousel-fade .carousel-item, .carousel-item img  {
  max-height: 90vh;
}

fixes it. It simply sets the max-height of any .carousel-item to maximum 90% of viewport height, which seems to be what you're after.

Obviously, you can tweak it to whatever makes sense for your project (maybe 85vh?).

这篇关于引导轮播图像尺寸的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！