Bootstrap + Flex + Firefox = bug

Question

我正在尝试使用this template在Bootstrap 3列中实现与Flexbox的垂直对齐。但在Firefox中，响应式图像会产生奇怪的结果。它们的高度太大，超出比例，超过100％。您可以在Firefox（35）中查看this JSFiddle。

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

显然，＆＃34; img-responsive＆＃34;上课和Firefox并不总是相处。您可以通过向班级添加width: 100%来解决此问题：

.img-responsive {
  width: 100%;
}