Bootstrap carousel show only part of the slide

问题

Can you guys see this url in mobile resolution: http://build-net.co.il/or-bayaar/tut/

The Carousel Slider show only a part if the image, like he crop it, it is not responsive? How can I fix it?

回答1:

Try to use this code for your carousel:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row">
    <div id="carousel" class="carousel slide" data-ride="carousel">
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <img src="http://www.irisbarnea.co.il/wp-content/uploads/2016/01/slide1.jpg" class="img-responsive">
        </div>
        <div class="item">
          <img src="http://www.irisbarnea.co.il/wp-content/uploads/2016/01/slide2.jpg" class="img-responsive">
        </div>
      </div>
    </div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

回答2:

thx to Gleb Kemarsky i figure out what was the problem,

the fixed code:

<div id="carousel" class="carousel slide" data-ride="carousel">                   
                  <div class="carousel-inner" role="listbox">
                        <div class="item active">
                            <img src="http://www.irisbarnea.co.il/wp-content/uploads/2016/01/slide1.jpg" class="img-responsive">
                             <!--<div style="background:url(http://www.irisbarnea.co.il/wp-content/uploads/2016/01/slide1.jpg) center center; background-size:cover;" class="slider-size"></div>-->
                        </div>
                        <div class="item">
                            <img src="http://www.irisbarnea.co.il/wp-content/uploads/2016/01/slide2.jpg" class="img-responsive">
                            <!-- <div style="background:url(http://www.irisbarnea.co.il/wp-content/uploads/2016/01/slide2.jpg) center center; background-size:cover;" class="slider-size"></div>-->
                        </div>
                  </div>
                </div>

来源：https://stackoverflow.com/questions/37721439/bootstrap-carousel-show-only-part-of-the-slide

标签

css3

twitter-bootstrap-3

carousel