css 如何在 Bootstrap 轮播中调整图像大小？

d8tt03nd 于 2023-03-14 发布在 Bootstrap

关注(0)|答案(4)|浏览(370)

How to change from this
To this?
我想缩短图片的宽度，但不是真正的红框。我该怎么做呢？我已经无计可施了。我尝试了这个论坛上的每一个解决方案，它没有缩小我在图片中显示的方式。

<div class="container box">
    <div class="row">

        <!-- carousel -->
        <div class="col-xs-8">
            <div id="carousel-example-generic" class="carousel slide"
                data-ride="carousel">
                <!-- Indicators -->
                <ol class="carousel-indicators">
                    <li data-target="#carousel-example-generic" data-slide-to="0"
                        class="active"></li>
                    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                </ol>

                <!-- Wrapper for slides -->
                <div class="carousel-inner" role="listbox">
                    <div class="item active">
                        <img
                            src=""
                            alt="..." />

                    </div>
                    <div class="item">
                        <img src="" alt="..." />

                    </div>
                    <div class="item">

                        <img src="" alt="..." />

                    </div>
                    ...
                </div>

                <!-- Controls -->
                <a class="left carousel-control" href="#carousel-example-generic"
                    role="button" data-slide="prev"> <span
                    class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a> <a class="right carousel-control" href="#carousel-example-generic"
                    role="button" data-slide="next"> <span
                    class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
        </div>
        <div class="col-xs-4"></div>
    </div>
</div>

css

来源：https://stackoverflow.com/questions/52560415/how-to-resize-image-in-bootstrap-carousel

4条答案

按热度按时间

oaxa6hgo1#

尝试：

.carousel-inner .item img {
width: 100%; /* or width: 100% !important; */
}

赞(0）回复(0）举报 2023-03-14

brc7rcf02#

试试这个：

.carousel-inner > .item > img {
      width:100%; /* Or try to use important */
      height:auto;
    }

第二种方法是：

.carousel {
  width:100%; /* Or try to use important */
  height:auto;
}

如果不工作，让我知道，这样我就可以帮助

赞(0）回复(0）举报 2023-03-14

pobjuy323#

您可以使用以下命令在 Bootstrap Carousel中调整图像大小：

.carousel-inner .item img {
    height: 100%;
    width: 100% !important;
}

赞(0）回复(0）举报 2023-03-14

1yjd4xko4#

我有一个类似的问题，我解决了它通过一些内联样式。

<div class="carousel-item">
    <img 
      src="images/image.png"
      alt="testImg"
      style="height: 537px"
    />
  </div>

我只是使用Google Chrome检查元素来获得我满意的图像的高度，并对有问题的图像进行样式化，因为我的旋转木马中只有一些图像无法正常工作。

注意-在我的测试中，像这样设计图像的样式也正确地调整了指示器的位置，所以如果你需要的话，改变宽度和高度应该不会有问题。
我确实尝试了这里发布的其他解决方案，但似乎都不起作用。所以希望这能帮助一些人摆脱困境。

赞(0）回复(0）举报 2023-03-14

我来回答

css 如何在 Bootstrap 轮播中调整图像大小？

4条答案

相关问题

热门标签

最新问答