CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
Zhen Zhang
Zhen Zhang

Reputation: 1072

Bootstrap Carousel width bigger than picture

the picture of slide

I use carousel in Bootstrap to realize the sliding picture effect, but however, when the width of window become larger, the box of slide become larger while the width of picture region stays original.

How do modify the code to put the lefter margin of box to left margin of picture when the width is too much for picture?

Edit: the demo address: http://zgzhen.freeshell.ustc.edu.cn/posters/nctu2013

the effect i want: the auto-resize of carousel box so that the control panel on the right won't be out of range.

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

Upvotes: 1

Views: 2472

Answers (1)

Navneil Naicker
Navneil Naicker

Reputation: 3691

Your question is not clear enough, do you want to centre the image or want to fill the image. Please try this and let me know for more assistance. Paste the below code in your CSS Stylesheet.

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

Upvotes: 4

Related Questions