引导轮播大小调整图像

问题描述

我正在尝试使用bootstrap在我的wordpress网站上制作轮播.我想在其旁边放置四个块链接.我在那里有块，图像滚动良好，但是我相信轮播会改变图像的高度.

Hi I am trying to make a carousel on my wordpress website with bootstrap. I would like to put four block links next to it. I have the blocks there and the images are scrolling fine, However I believe the carousel is changing the height of the image.

我有图像(640 x 360)，并且将4个块设置为90像素高.我这样做是为了使块与转盘底部齐平.除了块太大.我不明白这可能是什么问题.而且我搜索了所有CSS.

I have images (640 x 360) and I made the 4 blocks 90 pixels high. I did this so the blocks would be flush with the bottom of the carousel. Except the blocks are too big. I don't understand what the problem could be. And I have searched through all of the 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>

推荐答案

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

The reason why your image is resizing which is because it is fluid. You have two ways to do it:

1. 要么使用CSS来给图像固定尺寸，要么:

1. Either give a fixed dimension to your image using CSS like:

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

执行此操作的第二种方法:

A second way to can do this:

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

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