react-bootstrap旋轉木馬寬度行爲

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

編輯基於評論，保存響應使用媒體查詢（也承擔記住，除非你旋轉木馬和你的圖像之間的指定尺寸，他們將不只是匹配）：

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