Question

我的网页上有三列。中间列中的两个图像。这一切都是通过bootstrap完成的，当我调整页面大小（使其变小）时，图像会超出中间列。只有当图像到达Web浏览器的边缘时，图像才会调整大小或重新定位。有谁知道它为什么这样做？这是一个asp.net Web表单网站。主页面已经有3列全部设置和工作我只是将图像放在中间列的竞争占位符中。

这是我放入图片的代码的一部分。

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">

  <div class="container">
    <div class="row">
         <div class="col-xs-12 col-sm-6 col-md-7">
            <div id="myCarousel" class="carousel slide">
                <ol class="carousel-indicators">
                    <li data-target="myCarousel" data-slide-to="0" class="active"></li>
                    <li data-target="myCarousel" data-slide-to="1"></li>
                    <li data-target="myCarousel" data-slide-to="2"></li>
                </ol>
                <div class="carousel-inner">
                    <div class="item active">
                        <img src="images/Ad1.jpg" class="img-responsive" />
                    </div>
                </div>
            </div>

        </div>
        <div class="col-xs-6 col-md-5">
            <div id="adRotator" class="carousel slide">
                <div class="carousel-inner">
                    <div class="item active">
                        <img src="images/Ad2.jpg" class="img-responsive" />
                        <div class="container">
                            <div class="carousel-caption">
                                <h1>Ad rotator</h1>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

在CSS中将图像宽度设置为100％有助于此。在您的具体示例中，可以通过以下方式解决：

.item img {
    width: 100%;
}

Bootstrap调整大小网页图像不在列中

1 个答案: