Question

大家好，我希望你们都有一个美好的一天，只是简单地说我的问题是我有一个由bootstrap制作的旋转木马代码，它工作得很好，但我在旋转木马里面的三个图像，他们没有相同的高度和我想让他们全宽，我试图通过他们的班级控制他们，但它没有工作，我试图给每个图像一个id但同样的事情又发生了我没有工作。老实说，我正在寻求这个问题，我不知道我怎么处理它所以希望你们都可以帮助我和那个再次。

Answer 1

您可以为.carousel-inner .item类提供固定高度和overflow: hidden;。所以要添加的行将是

.carousel-inner .item{
    height: 300px;
    overflow: hidden;
}

执行此操作时，如果任何幻灯片内的图像大于提供的高度，则将隐藏图像的其余部分。但这可能不是最佳实践，因为这可能会隐藏幻灯片图像的重要部分，但如果您希望旋转木马中所有幻灯片的高度均匀，那么这可能是最佳选择（如果您考虑选择保持所有相同尺寸的图像。）

Answer 2

这是我文件的CSS

/*------------------------------------------*/
/*Bootstrap button outline override*/
/*------------------------------------------*/


.btn-outline {
    background-color: transparent;
    color: inherit;
    transition: all .2s;
}

.btn-primary.btn-outline {
    color: #428bca;
}

.btn-success.btn-outline {
    color: #5cb85c;
}

.btn-info.btn-outline {
    color: #5bc0de;
}

.btn-warning.btn-outline {
    color: #f0ad4e;
}

.btn-danger.btn-outline {
    color: #d9534f;
}

.btn-primary.btn-outline:hover,
.btn-success.btn-outline:hover,
.btn-info.btn-outline:hover,
.btn-warning.btn-outline:hover,
.btn-danger.btn-outline:hover {
    color: #fff;
}

/*------------------------------------------*/
/*CSS CUSTOMIZE*/
/*------------------------------------------*/


#info-btn {	margin-right: 2%; }

/*------------------------------------------*/
/*carousel*/
/*-----------------------------------------*/
.carousel-inner .item{
    height: 638px;
    overflow: hidden;
}

 <!-- Carousel feature -->


      

      <header id="myCarousel" class="carousel slide">
        <!-- 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>
        </ol>

        <!-- Wrapper for Slides -->
        <div class="carousel-inner">
            <div class="item active">
                <!-- Set the first background image using inline CSS below. -->
                <img src="img/taxi.jpeg" class="fill">
                <div class="carousel-caption">
                    <h2>Caption 1</h2>
                </div>
            </div>
            <div class="item">
                <!-- Set the second background image using inline CSS below. -->
                <img src="img/ocean.jpeg" class="fill">
                <div class="carousel-caption">
                    <h2>Caption 2</h2>
                </div>
            </div>
            <div class="item">
                <!-- Set the third background image using inline CSS below. -->
                <img src="img/nyc.jpeg" class="fill">
                <div class="carousel-caption">
                    <h2>Caption 3</h2>
                </div>
            </div>
        </div>

        <!-- Controls -->
        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
            <span class="icon-prev"></span>
        </a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next">
            <span class="icon-next"></span>
        </a>

    </header>

如何控制旋转木马中图像的大小

2 个答案: