Question

我想缩短此轮播中图像的宽度，而不是实际的红色框。我该怎么做？我机智。我在该论坛上尝试了所有解决方案，但并没有像我在图中显示的那样缩小它。

    <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>

Answer 1

尝试：

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

Answer 2

尝试一下：

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

第二种方法：

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

如果不工作，请告诉我，以便我提供帮助

Answer 3

您可以使用以下方法在Bootstrap Carousel中调整图像的大小：

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

Answer 4

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

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

我只是使用 Google Chrome 检查元素来获取我满意的图像的高度并为问题图像设置样式，因为我的轮播中只有一些无法正常工作的图像。

-注意- 在我的测试中，像这样设置图像样式也可以正确调整指示器的位置，因此如果需要，更改宽度和高度应该不会有问题。

我确实尝试了此处发布的其他解决方案，但似乎都没有奏效。所以希望这会对某人有所帮助。

How to resize image in bootstrap carousel?

4 个答案: