Сделайте img в высоте flexbox на 100% и получите отзывчивый, непоследовательный результат рендеринга flexbox - PullRequest
Новая
       10

Сделайте img в высоте flexbox на 100% и получите отзывчивый, непоследовательный результат рендеринга flexbox

1 голос
/ 12 июля 2020

Я пытаюсь поместить 4 изображения в div flexbox в родительском flexbox с общей высотой 100%, не выходя за пределы родительского flexbox. Я много искал, но ничего полезного не нашел.

Я сделал минимальный пример: 

        html {
            height: 100%;
        }
        body {
            height: 100%;
            margin: 0;
            display: flex;
        }
        main {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            background-color: yellowgreen;
        }
        .imgs {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .img100 {
            max-width: 100%;
            max-height: 100%;
            vertical-align: middle;
        }
    <main>
        <!--
            Weird. Chromium (Chrome & new Edge) usually renders height 100%,
            but not height-responsive; sometimes renders scroll bar.
            Firefox always renders the scroll bar result.
        -->
        <div class="imgs">
            <img class="img100" src="https://imgur.com/ruE1EBV.jpg">
        </div>
        <div class="imgs">
            <img class="img100" src="https://imgur.com/ruE1EBV.jpg">
        </div>
        <div class="imgs">
            <img class="img100" src="https://imgur.com/ruE1EBV.jpg">
        </div>
        <div class="imgs">
            <img class="img100" src="https://imgur.com/ruE1EBV.jpg">
        </div>
    </main>

При открытии этого примера браузеры на основе хрома (Chrome, новый Edge) обычно отображают высоту 100%, желаемый результат, но это не так. с учетом высоты ": максимальная высота изображений остается фиксированной после полной загрузки страницы. Что еще хуже, иногда они дают растянутый результат с полосой прокрутки; и Firefox всегда дает мне растянутый результат с полосой прокрутки, чего я не хочу.

Попробуйте открыть эту SO-страницу в Chromium & Firefox и запустить фрагмент. Результаты тоже разные.

Хром (почти всегда слева, редко справа): Chromium result

Firefox (always): image 

html {
    height: 100%;
}
body {
    height: 100%;
    margin: 0;
    display: flex;
}
main {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: yellowgreen;
}
a {
    flex: 1;
    background-image: url('https://imgur.com/ruE1EBV.jpg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    border: 5px solid red;
}
<main>
    <a href="https://stackoverflow.com"></a>
    <a href="https://stackoverflow.com"></a>
    <a href="https://stackoverflow.com"></a>
    <a href="https://stackoverflow.com"></a>
</main>

Изменить:

Равная высота строк в flex-direction: column допустима, если содержимое внутри не содержит изображений. Я думаю, что самая сложная часть - это изображения. Они просто растягиваются ... 

html {
    height: 100%;
}
body {
    height: 100%;
    margin: 0;
    display: flex;
}
main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: yellowgreen;
}
.imgs {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 5px solid red;
}
.img100 {
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle;
}
<main>
    <div class="imgs">
        hello
    </div>
    <div class="imgs">
        hello
    </div>
    <div class="imgs">
        hello
    </div>
    <div class="imgs">
        hello
    </div>
</main>

1 Ответ

0 голосов
/ 12 июля 2020

Что ж, я нашел простой ответ, чтобы исправить этот простой минимальный пример.

Просто добавьте overflow: hidden к .imgs, чтобы изображения не вырастали из main. 

html {
    height: 100%;
}
body {
    height: 100%;
    margin: 0;
    display: flex;
}
main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: yellowgreen;
}
.imgs {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.img100 {
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle;
}
<main>
    <div class="imgs">
        <img class="img100" src="https://imgur.com/ruE1EBV.jpg">
    </div>
    <div class="imgs">
        <img class="img100" src="https://imgur.com/ruE1EBV.jpg">
    </div>
    <div class="imgs">
        <img class="img100" src="https://imgur.com/ruE1EBV.jpg">
    </div>
    <div class="imgs">
        <img class="img100" src="https://imgur.com/ruE1EBV.jpg">
    </div>
</main>

Применение этого к моему фактическому, гораздо более огромному макету исправило мой макет. Поэтому все, что мне нужно сделать, это внимательно проверить мои overflow s.

Почему Chromium ведет себя по-другому: stackoverflow: Почему Chrome и Firefox показывают разные результаты гибкого макета?

...