Images in flex layout not keeping aspect ratio on chrome

2
votes

So I am trying to create two rows of 5 images. I did the following :

HTML

<div class="container">
  <div class="header">
    <!-- Some text -->
  </div>
  <div class="secondary-header">
    <!-- Some more text -->
  </div>
  <div class="top-margin" fxLayout="row wrap" fxLayoutAlign="center top">
    <img *ngFor="let i of images" [src]="i" fxFlex="20">
  </div>
</div>

CSS

.container {
  padding: 2.5% 5%;
}

.header {
    font-size: 60px;
    font-family: "Yanone Kaffeesatz";
    color: #333;
    text-align: center;
}

.secondary-header {
    font-size: 20px;
    font-family: "Yanone Kaffeesatz";
    color: #333;
    text-align: center;
}

.top-margin {
  margin-top: 2.5%;
}

This solution turns out perfect on Firefox 64:

Perfect results on Firefox 64

However, the images have a greater height on Chrome 71, breaking the aspect ratio:

Not working on Chrome 71

None of the solutions found on this question worked. I am using Angular 7.1.4 and Flex Layout 7.0.0-beta.22.

2
cssangularflexboxcross-browserangular-flex-layout

2 Answers

0
votes

Have you tried:

img {
  align-self: flex-start;
}

Could you provide a link to an example?

0
votes

I had the same problem and eventually found a nicer solution. You have to add this to your img tag:

img {
    width: 100%;
    height: 100%;
    min-width: 0;
}

Here is a full discussion: https://github.com/philipwalton/flexbugs/issues/225