html - Bootstrap + Flex + Firefox = bug

Question

我正在尝试使用this template在 Bootstrap 3 列中实现与 Flexbox 的垂直对齐。但在 Firefox 中，我得到了响应式图像的奇怪结果。他们的高度太大，不成比例，超过100%。您可以查看this JSFiddle在 Firefox 中 (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%;
}