Html 引导调整网页大小图像超出列
我的网页上有三个栏目。中间列中有两个图像。这一切都是通过引导完成的,当我调整页面大小(使其变小)时,图像会超出中间的列。只有当图像到达web浏览器的边缘时,图像才会重新调整大小或位置。有人知道它为什么这样做吗?它是一个asp.net web表单网站。母版页已经有3列,所有的设置和工作,我只是把图像放在中间占位符的竞争占位符内。 这是我放在图片中的代码部分Html 引导调整网页大小图像超出列,html,asp.net,css,twitter-bootstrap,Html,Asp.net,Css,Twitter Bootstrap,我的网页上有三个栏目。中间列中有两个图像。这一切都是通过引导完成的,当我调整页面大小(使其变小)时,图像会超出中间的列。只有当图像到达web浏览器的边缘时,图像才会重新调整大小或位置。有人知道它为什么这样做吗?它是一个asp.net web表单网站。母版页已经有3列,所有的设置和工作,我只是把图像放在中间占位符的竞争占位符内。 这是我放在图片中的代码部分 <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1
<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%;
}
如果您有JSFIDLE,If将帮助我们。请说明您的预期行为和实际行为。还有一个jsfiddle。别担心,伙计们,我的一个朋友帮我修复了它,不管怎样,还是简单地从bootstrap
w-100
类。