29

嗨，我正在尝试使用引导程序在我的 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">‹&lt;/a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next">›&lt;/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>
4

11 回答 11

42

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

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

    .carousel-inner > .item > img {
  宽度：640 像素；
  高度：360px；
}

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

    .carousel {
  宽度：640 像素；
  高度：360px；
}
于 2013-06-28T05:12:13.760 回答
25

将此添加到您的CSS：

.carousel-inner > .item > img, .carousel-inner > .item > a > img {
    width: 100%;
}
于 2014-06-20T11:02:05.627 回答
9

将以下代码放入您的 CSS 中，这适用于 Bootstrap 4：

.w-100 {
  width: 100% !important;
  height: 75vh;
}
于 2020-02-09T09:27:09.987 回答
3

我有同样的问题。您必须使用具有相同高度和宽度的所有图像。您可以使用主页部分中的调整大小选项使用 Windows 中的绘图应用程序简单地更改它，然后使用 CSS 调整图像大小。可能出现这个问题是因为标签里面的width和height属性没有响应。

于 2016-10-30T18:57:49.760 回答
2

将您的图像标签替换为

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

使用样式属性并确保没有设置图像高度和宽度的图像的 CSS 类

于 2013-06-28T04:57:43.137 回答
2

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

<head>
  <style>.carousel-inner > .item > img { width:100%; height:570px; } </style>
</head>
于 2017-02-25T20:21:52.430 回答
2

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

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

.carousel-inner > .carousel-item > img {
  height: 100vh;
}
于 2019-12-06T17:08:07.920 回答
2

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>
于 2020-01-07T14:52:46.567 回答
0

有同样的问题，这里介绍的 CSS 解决方案都没有工作。

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

于 2020-05-01T10:20:10.943 回答
0

这对我有用，max-height允许图像自动调整而不是裁剪它们

    <div class="carousel-item">
      <img src="image-link" class="d-block w-100" alt="image" style="max-height:100vh;">
    </div>
于 2021-08-17T18:12:57.177 回答
-4

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

于 2018-03-21T23:35:43.933 回答