Редактировать: Вот кодовая ручка и скриншот, демонстрирующий проблему
Кодовая ручка
IЯ пытаюсь выровнять изображение по центру с помощью flexbox, сохранить его соотношение сторон, а также иметь прозрачный фон под ним (проверьте изображения ниже).Я подошел к этой проблеме, создав родительский контейнер полной ширины, содержащий 4 строки (первая - заголовок, вторая - логотип, третья - социальные ссылки, четвертая - значок шеврона-вниз). Таким образом, родительский контейнер имеет flex-direction: rowсодержащий их 4. Внутри контейнера логотипа у меня есть контейнер родительского столбца с flex-direction: столбец, содержащий 2 пустых элемента div с flex: 1 и логотип моего приложения.
Mixins
=full-height-width
width: 100%
height: 100%
=fill($background-color: null)
flex: 1
display: flex
height: 100%
=flex-center-contents
display: flex
justify-content: center
align-items: center
// grid mixins
=row($z-index: auto)
display: flex
flex-direction: column
z-index: $z-index
flex-wrap: nowrap
=column($z-index: auto)
display: flex
flex-direction: row
z-index: $z-index
flex-wrap: nowrap
Стили
// Grid implementation
.fill
+fill($logo-background-color)
z-index: $not-animated-background-z-index
.parent-row-container
+full-height-width()
+row($not-animated-background-z-index)
.parent-column-container
+full-height-width()
+column($not-animated-background-z-index)
#parent-container
+full-height-width()
#social-container, #name-container, #logo-container
flex: 1
#social-container, #name-container
background-color: $logo-background-color
+flex-center-contents()
z-index: $not-animated-background-z-index
#name-container
> #name
color: $home-primary-text-color
font-family: $font-stack-sci-fi
font-size: $name-font-size
text-align: center
user-select: none
#logo-container
display: flex
> #logo-img-wrapper
> #logo
max-height: 100%
max-width: 100%
object-fit: contain
#social-container
display: flex
flex-wrap: wrap
> .social-icon
font-size: $social-icon-font-size
min-width: 85px
+media("<=tablet")
min-width: 45px
text-align: center
#bottom-arrow-container
background-color: $logo-background-color
padding-bottom: 1rem
+flex-center-contents()
z-index: $not-animated-background-z-index
HTML
<div class="parent-row-container">
<!-- Row -->
<div class id="name-container">
<p id="name">
Artist name
</p>
</div>
<!-- End Row -->
<!-- Row -->
<div id="logo-container" class="parent-column-container">
<!-- Column -->
<div class="fill"></div>
<!-- Column -->
<div id="logo-img-wrapper">
<img id="logo" src="@img/home/logo.png" />
</div>
<!-- Column -->
<div class="fill"></div>
</div>
<!-- End Row -->
<!-- Row -->
<div class="fill">
<!-- Column -->
<div id="social-container">
</div>
</div>
<div id="bottom-arrow-container">
<font-awesome-icon class="selectable" :icon="['fa', 'chevron-down']" :style="{ color: 'white'}" />
</div>
</div>
Это приводит к следующему при запуске на Chromium / Opera (ожидается) 
НоFirefox производит это 
Это как-то связано с тем, как firefox обрабатывает ширину в процентах?Если я изменю контейнер img и добавлю flex: 1 на контейнере изображения, то firefox исправлен, но хром / опера ломаются, и они центрируют изображение (из-за прилегания объекта: содержат), оставляя пробелы по краям (также ожидаемое поведение)., если я полностью удаляю img из html, сетка такая же, как и в chrome / opera
Кто-нибудь из вас испытывал что-либо подобное?