重新调整图像的Bootstrap轮播

Question

嗨,我正在尝试使用bootstrap在我的wordpress网站上制作旋转木马.我想在它旁边放四个块链接.我有块,图像滚动很好,但我相信旋转木马正在改变图像的高度.

我有图像(640 x 360),我将4个块高90像素.我做了这个,所以块将与旋转木马的底部齐平.除了块太大了.我不明白问题是什么.我搜索了所有的CSS.

这是我的代码:

<!--==========================================-->
<!-- Carousel                                 -->
<!--==========================================-->
<div>
    <div id="myCarousel" class="carousel slide">
        <div class="carousel-inner">

            <!--Carousel item 1-->
            <div class="item active">
                <img src="http://localhost:6054/wp-content/themes/BLANK-Theme/images/material/ej-manuel.png" alt="buffalo-skyline" width="640" height="360" />
                <div class="carousel-caption">
                    <h4>First Thumbnail label</h4>
                        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                </div>
            </div>

            <!--Carousel item 2-->
            <div class="item">
                <img src="http://localhost:6054/wp-content/themes/BLANK-Theme/images/material/image3.jpg" width="640" height="360" />
                <div class="carousel-caption">
                    <h4>Second Thumbnail label</h4>
                        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                </div>
            </div>

            <!--Carousel item 3-->
            <div class="item">
                <img src="http://localhost:6054/wp-content/themes/BLANK-Theme/images/material/images.jpg" alt="the-buzz-img3" width="640" height="360" >
                <div class="carousel-caption">
                    <h4>Third Thumbnail label</h4>
                    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                </div>
            </div>

        </div>
        <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
    </div>
</div>

<!--==========================================-->
<!-- Side Buttons                             -->
<!--==========================================-->
<div>
    <ul class="nav nav-tabs nav-stacked">
        <li><a style="background-color: #051223; color: #fff; height: 90px; width: 210px;">Story 1</a></li>
        <li><a style="background-color: #051223; color: #fff; height: 90px; width: 210px;">Story 1</a></li>
        <li><a style="background-color: #051223; color: #fff; height: 90px; width: 210px;">Story 4</a></li>
        <li><a style="background-color: #051223; color: #fff; height: 90px; width: 210px;">Story 5</a></li>
    </ul>
</div>

Answer 1

你的图像调整大小的原因是因为它是流动的.你有两种方法可以做到:

1. 使用CSS为您的图像提供固定尺寸,如:

   .carousel-inner > .item > img {
     width:640px;
     height:360px;
   }

2. 第二种方法可以做到这一点:

   .carousel {
     width:640px;
     height:360px;
   }

Answer 2

将此添加到您的CSS:

.carousel-inner > .item > img, .carousel-inner > .item > a > img {
    width: 100%;
}

Answer 3

Put the following code in your CSS, this works with Bootstrap 4:

.w-100 {
  width: 100% !important;
  height: 75vh;
}