Html 如何阻止引导转盘改变大小

Html 如何阻止引导转盘改变大小,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我有一个引导旋转木马,它包含不同大小的图像,所以当旋转木马滑动时,旋转木马会改变它的尺寸以适应图像的大小 当我在图像上使用w-100或h-100时,它仍然会根据图像在旋转木马边框上的溢出情况更改旋转木马的宽度或高度 如何阻止这种情况发生,以便旋转木马在其“col-8”父对象中具有固定的高度和宽度。下面是我的HTML供参考,在这个页面上没有额外的CSS不是引导。谢谢 <div id="carouselExampleIndicators" class="carousel slide carou

我有一个引导旋转木马,它包含不同大小的图像,所以当旋转木马滑动时,旋转木马会改变它的尺寸以适应图像的大小

当我在图像上使用w-100或h-100时,它仍然会根据图像在旋转木马边框上的溢出情况更改旋转木马的宽度或高度

如何阻止这种情况发生,以便旋转木马在其“col-8”父对象中具有固定的高度和宽度。下面是我的HTML供参考,在这个页面上没有额外的CSS不是引导。谢谢

<div id="carouselExampleIndicators" class="carousel slide carousel-style w-100" data-ride="carousel">
                <ol class="carousel-indicators">
                    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                </ol>
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <img class="d-block" src="images/bank-note-euro-bills-paper-money-63635.jpeg" alt="First slide">
                    </div>
                    <div class="carousel-item">
                        <img class="d-block" src="images/lights-night-unsharp-blured.jpg" alt="Third slide">
                        <div class="carousel-caption d-none d-md-block">
                            <h5>Night Lights</h5>
                            <p>Watch the night lights</p>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <img class="d-block" src="images/pexels-photo-326259.jpeg" alt="Third slide">
                    </div>
                </div>
                <a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                  </a>
            </div>

  • 夜灯 看夜灯


    您可以将固定高度与
    溢出:隐藏
    属性一起指定给
    旋转木马项目
    选择器。尝试将其添加到css中

    .carousel-item {
    height: 300px;
    overflow: hidden;
    width: 100%;
    }
    .carousel-item img {
    width: 100%;
    }
    

    由于某种原因,它没有工作:/it只是忽略了溢出:hidden。我也清空了缓存。将图像设置为h-100可以解决调整大小的问题,但是图像无法填充旋转木马的整个宽度。很抱歉,我的样式表链接中有语法错误,可以正常工作。谢谢,快乐编码…继续编码