Bootstrap + Flex + Firefox = bug

Question

我試圖使用this template實現與Flexbox內Bootstrap 3列垂直對齊。但在Firefox中，我使用響應式圖像獲得了奇怪的結果。他們身高過大，超出比例，超過100％。您可以在Firefox中檢查this JSFiddle（35）。

CSS 
.vertical-align { 
    display: flex; 
    flex-direction: row; 
} 

.vertical-align > [class^="col-"], 
.vertical-align > [class*=" col-"] { 
    display: flex; 
    align-items: center;  /* Align the flex-items vertically */ 
    justify-content: center; /* Optional, to align inner flex-items 
           horizontally within the column */ 
} 
HTML 
<div class="container"> 
    <div class="row vertical-align"> 
    <div class="col-xs-6"> 
     <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary,</p> 
    </div> 
    <div class="col-xs-6"> 
     <img src="http://placehold.it/1400x1000" class="img-responsive" /> 
    </div> 
    </div> 
</div> 

任何想法如何解決這個問題？

Answer 1

顯然，「img-responsive」類和Firefox並不總是相處的。您可以通過在課程中添加width: 100%來解決此問題：

.img-responsive { 
    width: 100%; 
}