2

I am trying to use this template to achieve vertical alignment with Flexbox inside Bootstrap 3 columns. But in Firefox I get strange results with responsive images. They get height too big, out of proportion, more than 100%. You can check this JSFiddle in 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>

Any ideas how to fix this problem?

Community
  • 1
  • 1
dandaka
  • 829
  • 2
  • 9
  • 19

1 Answers1

2

So apparently the "img-responsive" class and Firefox don't always get along. You can fix this by adding width: 100% to the class:

.img-responsive {
  width: 100%;
}
BSMP
  • 4,596
  • 8
  • 33
  • 44
  • Why is that happening? Is it a bug? – dandaka May 16 '15 at 09:19
  • 1
    @dandaka - [This article](http://www.telegraphicsinc.com/2014/03/bootstrap-img-responsive-not-working-in-firefox/) said it had to do with absolute positioning but since you're not doing that I don't know why it's happening here. – BSMP May 16 '15 at 17:14
  • If you do this, then all your images with this class will expand to fit its container, outgrowing its own native size if needed. That's probably not what you want. You need to target the specific affected images; in this case, `.vertical-align .img-responsive`. – Pere Jun 12 '15 at 10:48