引导轮播调整图像大小答案

【问题标题】：Bootstrap carousel resizing image引导轮播调整图像大小
【发布时间】：2013-06-25 18:57:48
【问题描述】：

您好，我正在尝试使用引导程序在我的 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>

【问题讨论】：

标签： css wordpress twitter-bootstrap

【解决方案1】：

用

替换你的图片标签

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

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

【讨论】：

感谢您的帮助，但我不确定它的工作原理：（我在更改图像标签后进入了 Firefox 样式编辑器，但没有任何影响轮播图像的大小。

【解决方案2】：

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

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

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

第二种方法：

.carousel {
  宽度：640 像素；
  高度：360px；
}

【讨论】：

我尝试了所有方法来更改图像、内联样式、css 表格，似乎没有任何影响。
你能提供你的代码的小提琴链接以帮助我更好地理解
确保在引导 css 后 @LegendaryAks 建议您的 css 更新
非常感谢第一个为 Bootstrap 4.1.3 工作的我们必须使用 .carousel-inner > .carousel-item > img { height: 360px;宽度：640 像素； }
这个解决方案很棒。另一种解决方法是在图像标签本身中使用样式，例如<img src="some_image" style="height:500px; width:500px;">。显然这是最后的手段，因为这意味着要对多个地方而不是一个地方进行更改。

【解决方案3】：

将此添加到您的 CSS：

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

【讨论】：

这对我有用：
解决了 Firefox 37.0.2 和 IE 11 中的问题。
我可以确认@hdlopes 的评论。这让我在 Firefox 上发疯了。谢谢！

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

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

【讨论】：

请编辑您的答案。能否提供示例代码解决方案？

【解决方案7】：

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

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

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

【讨论】：

【解决方案8】：

给你的divcarousel-item上课img-fluid。最后是：

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

【讨论】：

【解决方案9】：

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

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

【讨论】：

【解决方案10】：

遇到了同样的问题，这里介绍的 CSS 解决方案都不起作用。

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

【讨论】：

仔细检查您的拼写，并将height=360 包装在代码块中。

【解决方案11】：

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

    <div class="carousel-item">
      <img src="image-link" class="d-block w-100" alt="image" style="max-height:100vh;">
    </div>

【讨论】：