jquery - Bootstrap轮播宽度比图片大

Question

我在Bootstrap中使用轮播来实现滑动图片效果，但是当窗口宽度变大时，幻灯片的框变大，而图片区域的宽度保持原来的宽度。

当图片宽度过大时，如何修改代码，将box的左边缘放到图片的左边缘？

编辑:演示地址:http://zgzhen.freeshell.ustc.edu.cn/posters/nctu2013

我想要的效果:轮播框自动调整大小，这样右侧的控制面板就不会超出范围。

<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>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
</ol>

<div class="carousel-inner">
<div class="item active">
  <img src="../images/upload/nctu/1.png" alt="...">
</div>
<!-- other pictures-->
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"></a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next"></a>
</div></div>

Answer 1

你的问题不够清楚，你是想让图片居中还是想要填充图片。请尝试此操作并让我知道以获得更多帮助。将以下代码粘贴到您的 CSS 样式表中。

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