我的网页上有三列。中间列中的两个图像。这一切都是通过 Bootstrap 完成的,当我调整页面大小时(使其变小),图像会超出中间栏。只有当图像到达网络浏览器的边缘时,图像才会调整大小或重新定位。有谁知道为什么要这样做?它是一个 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>
最佳答案
在这种情况下,在 CSS 中将图像的宽度设置为 100% 会有所帮助。在您的具体示例中,它可以通过以下方式解决:
.item img {
width: 100%;
}
关于html - Bootstrap 调整大小网页图像超出列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19747311/