Flexbox неправильно отображает изображения в Chrome - PullRequest
Новая
       4

Flexbox неправильно отображает изображения в Chrome

0 голосов
/ 25 мая 2020

У меня настроен flexbox, как показано во фрагменте, проблема в том, что в Chrome, когда область просмотра становится меньше ширины обоих изображений, весь веб-сайт уменьшается, и все становится беспорядочно. В Firefox все работает нормально. Я перепробовал все, что мог придумать, и ничего не работает. Вот ссылка на мой сайт: airstarkennels.com 

body {
  background: #000000 url("https://www.airstarkennels.com/images/main-background.jpg") left bottom/cover no-repeat fixed;
}
#first-page-header {
  color: #ff00ee;
  text-align: center;
}
#parents-page-content-wrapper {
  margin: 0 0 2em;
}
#parents-page-mommy-info-wrapper {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
}
.parents-page-image-wrapper {
  display: flex;
  flex-flow: row nowrap;
  max-width: 100%;
}
.parents-page-images {
  max-height: 350px;
  opacity: 1;
  cursor: pointer;
  transition: 0.4s;
}
.parents-page-images:hover {
  opacity: 0.8;
}
<main>
  <div id="parents-page-content-wrapper">
    <h1 id="first-page-header">Parents</h1>
    <div id="parents-page-mommy-info-wrapper">
      <div class="parents-page-image-wrapper">
        <img id="parents-page-mommys-pedigree" class="parents-page-images" src="https://www.airstarkennels.com/images/mommy-pedigree.jpg">
        <img id="parents-page-mommy-image" class="parents-page-images" src="https://www.airstarkennels.com/images/mommy.jpg">
      </div>
    </div>
  </div>
</main>

1 Ответ

2 голосов
/ 28 мая 2020

Это в основном происходит из-за того, что переполнение содержимого прокручивается на chrome по оси X. Вы можете использовать CSS Grid для контейнера изображений.
Создание контейнера сетки с помощью display: inline-grid, и, поскольку изображения могут иметь разную ширину, мы будем использовать grid-template-columns: auto auto для столбцов.
Итак, все вместе это так: 

body {
    background: #000000
        url('https://www.airstarkennels.com/images/main-background.jpg') left
        bottom/cover no-repeat fixed;
}

#first-page-header {
    color: #ff00ee;
    text-align: center;
}

#parents-page-content-wrapper {
    margin: 0 0 2em;
}
#parents-page-mommy-info-wrapper {
    display: flex;
    justify-content: center;
}
.parents-page-image-wrapper {
    display: inline-grid;
    grid-template-columns: auto auto;
    justify-items: space-between;
}

.parents-page-images {
    max-width: 100%;
    max-height: 350px;
    opacity: 1;
    cursor: pointer;
    transition: 0.4s;
}

.parents-page-images:hover {
    opacity: 0.8;
}
<main>
    <div id="parents-page-content-wrapper">
        <h1 id="first-page-header">Parents</h1>
        <div id="parents-page-mommy-info-wrapper">
            <div class="parents-page-image-wrapper">
                <img id="parents-page-mommys-pedigree" class="parents-page-images"
                    src="https://www.airstarkennels.com/images/mommy-pedigree.jpg">
                <img id="parents-page-mommy-image" class="parents-page-images"
                    src="https://www.airstarkennels.com/images/mommy.jpg">
            </div>
        </div>
    </div>
</main>
...