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

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

使用CSS为您的图像提供固定尺寸，如：

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

第二种方法可以做到这一点：

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

Answer 2

将此添加到您的css：

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

Answer 3

在CSS中放置以下代码，该代码可用于Bootstrap 4：

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

Answer 4

我遇到了同样的问题。您必须使用具有相同高度和宽度的所有图像。您可以使用主页部分中的resize选项从Windows中使用paint应用程序更改它，然后使用CSS调整图像大小。可能会出现此问题，因为标记内的width和height属性没有响应。

Answer 5

将以下代码放入网页编程的主题部分。

<head>
  <style>.carousel-inner > .item > img { width:100%; height:570px; } </style>
</head>

Answer 6

将img-fluid类授予您的div carousel-item。最后它将是：

<div class="carousel-item active img-fluid">
      <img class="d-block w-100" src="path to image" alt="First slide">
</div>

Answer 7

用

替换你的图片标签

<img src="http://localhost:6054/wp-content/themes/BLANK-Theme/images/material/images.jpg" alt="the-buzz-img3"  style="width:640px;height:360px" />

使用style属性并确保没有用于设置图像高度和宽度的图像的css类

Answer 8

使用此代码将图像滑块的高度设置为全屏/最多100个视口高度。使用引导轮播主题滑块时，这将很有帮助。我遇到了一些高度问题，我使用以下类来设置图像宽度100％和高度100vh。

<img class="d-block w-100" src="" alt="" >在图像标签中使用此类，并在样式标签或style.css文件中编写以下CSS代码

.carousel-inner > .carousel-item > img {
  height: 100vh;
}

Answer 9

有同样的问题，这里介绍的CSS解决方案均无效。

对我有用的是设置高度=“ 360”而没有设置任何宽度。我的照片尺寸不一样，像这样，它们有空间进行调整，但高度保持固定。

Answer 10

几年前我有这个问题..但我得到了这个。您需要做的就是将图像的宽度和高度设置为您想要的任何内容......我的意思是您的旋转木马内部的图像...不要添加样式attribut像“style：”（不是没有这个）但是这样的事情，并确保你的代码正确的工作......祝你好运

重新调整图像的Bootstrap轮播

10 个答案: