Изображения в гибком макете, не сохраняющие пропорции хрома - PullRequest
Новая
       14

Изображения в гибком макете, не сохраняющие пропорции хрома

0 голосов
/ 03 января 2019

Итак, я пытаюсь создать две строки по 5 изображений. Я сделал следующее:

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%;
}

Это решение идеально подходит для Firefox 64:

Perfect results on Firefox 64

Однако на Chrome 71 изображения имеют большую высоту, что нарушает соотношение сторон:

Not working on Chrome 71

Ни одно из решений, найденных на , этот вопрос не работал. Я использую Angular 7.1.4 и Flex Layout 7.0.0-beta.22.

1 Ответ

0 голосов
/ 05 января 2019

Вы пробовали: 

img {
  align-self: flex-start;
}

Не могли бы вы предоставить ссылку на пример?

...