引导轮播宽度和高度

Posted 2023-03-05

【中文标题】引导轮播宽度和高度

【英文标题】：Bootstrap carousel width and height

【发布时间】：2013-10-29 04:00:11

【问题描述】：

我正在尝试为图像做一个全宽（宽度：100%）和固定高度的引导轮播，但是如果我将宽度设置为 100%，那么高度也会自动占用 100%

我不确定问题是否出在我的文件中

 <div id="myCarousel" class="carousel slide">
<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>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
  <div class="active item">
    <%= image_tag "slider/slide-bg-1.jpg", class: "tales" %>
  </div>
  <div class="item">
    <%= image_tag "slider/slide-bg-2.jpg", class: "tales" %>
  </div>
  <div class="item"> 
    <%= image_tag "slider/slide-bg-3.jpg", class: "tales" %>
  </div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>

还有我的css文件

.tales 
  width: 100%;
  height: 200px;

【参考方案1】：

你想让它响应吗？如果你是，那么我只推荐以下内容：

.tales 
  width: 100%;

.carousel-inner
  width:100%;
  max-height: 200px !important;

但是，响应式处理此问题的最佳方法是使用以下媒体查询：

/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) 

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) 

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) 

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) 

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) 

【讨论】：

@Eduro 感谢您的回答。我遇到了以下问题，即幻灯片缺少标题。使用 1920 x 1080 大小的图像并且看不到完整图像。

【参考方案2】：

如果您使用 bootstrap 4 Alpha 并且在 chrome 中图像的高度有错误，我有一个解决方案： bootstrap 4 的文档是这样说的：

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner" role="listbox">
    <div class="carousel-item active">
      <img class="d-block img-fluid" src="..." >
    </div>
    <div class="carousel-item">
      <img class="d-block img-fluid" src="..." >
    </div>
    <div class="carousel-item">
      <img class="d-block img-fluid" src="..." >
    </div>
  </div>
</div>

解决方案：

解决方案是在图像周围放置“div”，使用“.container”类，如下所示：

<div class="carousel-item active">
  <div class="container">
    <img src="images/proyecto_0.png"  class="d-block img-fluid">
  </div>
</div>

【参考方案3】：

我为 Bootstrap 3 推荐以下内容

.carousel-inner > .item > img,
.carousel-inner > .item > a > img 
  min-height: 500px;    /* Set slide height here */

【讨论】：

拉伸图像... :-/

如果您的所有图像都具有相同的大小并且您使用该精确大小，则它可以工作。

使用max-height 而不是min-height

【参考方案4】：

我知道这是一篇较旧的帖子，但 Bootstrap 仍然活跃且活跃！

与@Eduardo 的帖子略有不同，我不得不修改：

#myCarousel.carousel.slide 
    width: 100%; 
    max-width: 400px; !important

当我只修改.carousel-inner 时，实际图像是固定大小的，但左/右控件在div 一侧显示不正确。

【参考方案5】：

我遇到了同样的问题。

当我的幻灯片向左移动时，我的高度变为原来的高度，（在响应式网站中）

所以我只用 CSS 修复了它：

.carousel .item.left img
    width: 100% !important;

【参考方案6】：

我创建了一个适合我的响应式示例，我发现它非常简单，看看我的 carousel-fill：

.carousel-fill 
    height: -o-calc(100vh - 165px) !important;
    height: -webkit-calc(100vh - 165px) !important;
    height: -moz-calc(100vh - 165px) !important;
    height: calc(100vh - 165px) !important;
    width: auto !important;
    overflow: hidden;
    display: inline-block;
    text-align: center;


.carousel-item 
    text-align: center !important;

我的导航高度+页脚小于 165 像素，因此该值对我有用。取一个适合您的值，我从引导程序中覆盖了 .carousel-item，因此请确保视频居中。

我的轮播看起来像这样，注意视频标签上的“carousel-fill”。

<div>
        <div id="myCarousel" class="carousel slide carousel-fade text-center" 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">
                <div class="carousel-item active">
                    <video autoplay muted class="carousel-fill">
                        <source src="~/Video/CATSTrade.mp4" type="video/mp4">
                        Your browser does not support the video tag.
                    </video>
                    <div class="carousel-caption">
                        <h2>CATS IV Trade engine</h2>
                        <p>Automated trading for high ROI</p>
                    </div>
                </div>
                <div class="carousel-item">
                    <video muted loop class="carousel-fill">
                        <source src="~/Video/itrs.mp4" type="video/mp4">
                    </video>
                    <div class="carousel-caption">
                        <h2>Machine learning</h2>
                        <p>Machine learning specialist</p>
                    </div>
                </div>
                <div class="carousel-item">
                    <video muted loop class="carousel-fill">
                        <source src="~/Video/frequency.mp4" type="video/mp4">
                    </video>
                    <div class="carousel-caption">
                        <h3>Low latency development</h3>
                        <p>Create ultra fast systems with our consultants</p>
                    </div>
                </div>
                <div class="carousel-item">
                    <img src="~/Images/data pipeline faded.png" class="carousel-fill" />

                    <div class="carousel-caption">
                        <h3>Big Data</h3>
                        <p>Maintain, generate, and host big data</p>
                    </div>
                </div>
            </div>

            <!-- Left and right controls -->
            <a class="carousel-control-prev" href="#myCarousel" 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="#myCarousel" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>

如果有人需要像我一样控制视频，我会像这样开始和停止视频：

<script language="javascript" type="text/javascript">
        $(document).ready(function () 
            $('.carousel').carousel( interval: 8000 )
            $('#myCarousel').on('slide.bs.carousel', function (args) 
                var videoList = document.getElementsByTagName("video");
                switch (args.from) 
                    case 0:
                        videoList[0].pause();
                        break;
                    case 1:
                        videoList[1].pause();
                        break;
                    case 2:
                        videoList[2].pause();
                        break;
                
                switch (args.to) 
                    case 0:
                        videoList[0].play();

                        break;
                    case 1:
                        videoList[1].play();
                        break;
                    case 2:
                        videoList[2].play();
                        break;
                
            )

        );
</script>

【参考方案7】：

我发现如果你只是想改变图像占据的元素的高度，这将是有用的代码。

.carousel-item 
    height: 600px !important;

但是，这不会使图像的大小动态化，它只会将图像裁剪成它的大小。

【参考方案8】：

只需将 放入图像属性中，如

<img class="d-block w-100" src="../assets/img/natural-backdrop.jpg"  >

【讨论】：

您不需要在height 或width 属性中放置单位。