さえずり - ブートストラップ中央カルーセル画像画面サイズ

Question

のreguardless私はTwitterのブートストラップ、カルーセルのために、以下の欲望を持っている：画面がカルーセルそして、大きい場合には

1. 、私は画像を中心にしたいです。
2. 画面がカルーセルより小さいときは、画像の部分だけを見たいと思う。画像のこの部分は中央に配置する必要があります。
3. イメージのサイズを変更する必要はありません。
4. 遷移が機能するはずです。

修正された問題1-3以下の私の例..しかし、それは私が3を破るために喜んでいる場合、私は簡単に4を修正することができますが、それは良くない4.を破ります。

例に

Bootplyリンク：http://bootply.com/88542

HTML：

<!-- Carousel 
================================================== --> 
<div id="myCarousel" class="carousel slide"> 
    <!-- Indicators --> 
    <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="http://lorempixel.com/1200/600/abstract/1" height="600px" width="1200px"> 
     <div class="container"> 
     <div class="carousel-caption"> 
      <h1>Bootstrap 3 Carousel Layout</h1> 
      <pthis is="" an="" example="" layout="" with="" carousel="" that="" uses="" the="" bootstrap="" 3="" styles.<="" small=""><p></p> 
      <p><a class="btn btn-lg btn-primary" href="http://getbootstrap.com">Learn More</a> 
     </p></pthis></div> 
     </div> 
    </div> 
    <div class="item"> 
     <img src="http://lorempixel.com/1200/600/abstract/2" height="600px" width="1200px"> 
     <div class="container"> 
     <div class="carousel-caption"> 
      <h1>Changes to the Grid</h1> 
      <p>Bootstrap 3 still features a 12-column grid, but many of the CSS class names have completely changed.</p> 
      <p><a class="btn btn-large btn-primary" href="#">Learn more</a></p> 
     </div> 
     </div> 
    </div> 
    <div class="item"> 
     <img src="http://placehold.it/1200X600" height="600px" width="1200px"> 
     <div class="container"> 
     <div class="carousel-caption"> 
      <h1>Percentage-based sizing</h1> 
      <p>With "mobile-first" there is now only one percentage-based grid.</p> 
      <p><a class="btn btn-large btn-primary" href="#">Browse gallery</a></p> 
     </div> 
     </div> 
    </div> 
    </div> 
    <!-- Controls --> 
    <a class="left carousel-control" href="#myCarousel" data-slide="prev"> 
    <span class="icon-prev"></span> 
    </a> 
    <a class="right carousel-control" href="#myCarousel" data-slide="next"> 
    <span class="icon-next"></span> 
    </a> 
</div> 
<!-- /.carousel --> 

CSS

/* BOOTSTRAP 3.x GLOBAL STYLES 
-------------------------------------------------- */ 
body { 
    padding-bottom: 40px; 
    color: #5a5a5a; 
} 



/* CUSTOMIZE THE CAROUSEL 
-------------------------------------------------- */ 

/* Carousel base class */ 
.carousel { 
    margin-bottom: 60px; 
} 
/* Since positioning the image, we need to help out the caption */ 
.carousel-caption { 
    z-index: 10; 
} 

/* Declare heights because of positioning of img element */ 
.carousel .item { 
    height: 600px; 
    width: 1200px; 
    background-color:#bbb; 
    left: 50%; 
    margin-left: -600px; 
} 
.carousel img { 
    position: absolute; 
    top: 0; 
} 



/* RESPONSIVE CSS 
-------------------------------------------------- */ 

@media (min-width: 768px) { 

    /* Remve the edge padding needed for mobile */ 
    .marketing { 
    padding-left: 0; 
    padding-right: 0; 
    } 

    /* Navbar positioning foo */ 
    .navbar-wrapper { 
    margin-top: 20px; 
    margin-bottom: -90px; /* Negative margin to pull up carousel. 90px is roughly margins and height of navbar. */ 
    } 
    /* The navbar becomes detached from the top, so we round the corners */ 
    .navbar-wrapper .navbar { 
    border-radius: 4px; 
    } 

    /* Bump up size of carousel content */ 
    .carousel-caption p { 
    margin-bottom: 20px; 
    font-size: 21px; 
    line-height: 1.4; 
    } 

} 

Answer 1

あなたがの画面サイズに応じた画像をリサイズしたい場合、これが役立つかもしれませんデバイス。 width = "100%"がその仕事をします。

<img src="http://lorempixel.com/1200/600/abstract/2" width = "100%"> 

Answer 2

この

.carousel .item img { 
    left: -9999px; /*important */ 
    right: -9999px; /*important */ 
    margin: 0 auto; /*important */ 
    max-width: none; /*important */ 
    min-width: 100%; 
    position: absolute; 
} 

を追加し、もちろん親のdiv要素の一つが位置持っている必要があります：相対して、私はそれがデフォルトでないと考えています。

は、ここでそれを参照してください：http://paginacrestinului.ro/

Answer 3

をちょうどあなたのCSSに以下を追加：

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