反応起動ストラップのカルーセル幅の振る舞い

Question

ページにカルーセルを正しく表示する方法や、どうやってそれを行うのかといった「正しい解決策」は何ですか？

http://i.imgur.com/m8VYVRv.png

反応し、ブートストラップコンポーネントのウェブサイト

   <Well> 
       <Carousel> 
        <Carousel.Item> 
         <img width={900} height={500} alt="900x500" src="src/assets/construction-maison.jpg"/> 
         <Carousel.Caption> 
          <h3>First slide label</h3> 
          <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p> 
         </Carousel.Caption> 
        </Carousel.Item> 
        <Carousel.Item> 
         <img width={900} height={500} alt="900x500" src="src/assets/chantier.jpg"/> 
         <Carousel.Caption> 
          <h3>Second slide label</h3> 
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
         </Carousel.Caption> 
        </Carousel.Item> 
        <Carousel.Item> 
         <img width={900} height={500} alt="900x500" src="src/assets/Maison_en_construction_Demoli.jpg"/> 
         <Carousel.Caption> 
          <h3>Third slide label</h3> 
          <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p> 
         </Carousel.Caption> 
        </Carousel.Item> 
       </Carousel> 
      </Well> 

http://i.imgur.com/BgqNfTE.png

img { 
    margin: auto; 
} 

これからのコードは、私が来たソリューションですが、それは "オフ" のようなものを感じています。

写真のサイズに合わせて自動マージンで回転台を縮小する必要がありますか？

Answer 1

あなたはあなたのイメージに等しい一定の大きさに.carouselを設定し、必要に応じてアライメント上で動作するように試みることができる：

.carousel { 
    width:900px; 
    height:500px; 
    margin: auto; 
} 

コメントに基づいEDIT、メディアクエリを使用して応答性を維持するために（またクマ心の中であなたがカルーセルとあなたの画像間の寸法を指定しない限り、彼らは一致しないこと）：

@media (max-width: 900px) { 
    .carousel { 
     width:auto; 
     height:auto; 
    } 
}