Bootstrap Carousel Image Resizing

时间:2014-05-26 18:24:43

标签: twitter-bootstrap

我正在为我开始工作的网站使用bootstrap,我添加了一个旋转木马,但它不断调整我的图像尺寸,使其与左边对齐并且更小但我无法计算为什么。这就是它现在的样子

<body>

<div id="homePageCarousel" class = "carousel slide">

<ol class = "carousel-indicators">
<li data-target="#homePageCarousel" data-slide-to="0" class="active"></li>
<li data-target="#homePageCarousel" data-slide-to="1"></li>
<li data-target="#homePageCarousel" data-slide-to="2"></li>
</ol>

<div class="carousel-inner">
<div class="item active">
  <img src="Images/paper1.jpg" alt="paper1" class="img-responsive">
  <div class="carousel-caption">
    <h3>StudentShare</h3>
    <p>Click the picture to learn more!</p>
  </div>
</div>
<div class="item">
  <img src="Images/sunset.jpg" alt="sunset" class="img-responsive">
  <div class="carousel-caption">
    <h3>Another Ad</h3>
    <p>Description of this Ad</p>
  </div>
</div>
<div class="item">
  <img src="Images/paper2.jpg" alt="paper2" class="img-responsive">
  <div class="carousel-caption">
    <h3>Another Ad</h3>
    <p>Description of this Ad</p>
  </div>
</div>
</div>

<a class="carousel-control right" href="#homePageCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
<a class="carousel-control left" href="#homePageCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>

</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">                      </script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>

1 个答案:

答案 0 :(得分:0)

你是否要求这样的事情jsBin Demo

我将max-width: 100%更改为width:100%以使用所有宽度