Какова наилучшая конфигурация флексбокса / образа?

Question

У меня возникают трудности с пониманием различных конфигураций размера изображения во Flexbox.Кажется, что я получаю разные результаты каждый раз, когда пытаюсь их применить.

Вместо того чтобы сказать «все зависит от ситуации», может ли кто-нибудь объяснить следующее с помощью какой-то последовательной логики, проходящей через эти разные сценарии?Я хотел бы знать, почему результаты отличаются каждый раз.Я не слишком обеспокоен соотношением изображений, но больше о расположении изображений в зависимости от размера области просмотра.Допустим, я использую Object-Fit: Cover для всех сценариев.Вот пример, который помещает два изображения рядом.

index.html

<section>
        <figure>
                <img src="profile image1.jpg" alt="">

        </figure>
        <figure>
                <img src="profile image2.jpg" alt="">
        </figure>
</section>

style.css

section {
  display: flex;
}

Сценарий 1

style.css

    /* figure wrapper's dimension is set, but not those of the images */
    figure {
      flex: 50%;
      width: 100%;
      height: auto;
    }

Сценарий 2

style.css

   /* figure wrapper's dimension and the images' dimension are both set with a percentage unit */
    figure {
      flex: 50%;
      width: 100%;
      height: auto;
    }

    img {
      width: 100%;
      height: 100%;
    }

Сценарий 3

style.css

/* figure wrapper's dimension and the images' dimension are both set with the pixel unit */
figure {
  flex: 50%;
  width: 400px;
  height: 400px;
}

img {
  width: 400px;
  height: 400px;
}

Сценарий 4

style.css

/* figure's dimension is set with max-width and max-height */
figure {
  flex: 50%;
  max-width: 400px;
  max-height: 400px;
}

img {
  width: 100%;
  height: 100%;
}

Senario 5

style.css

/* figure's dimension and image's dimension are set with max-width and max-height */
figure {
  flex: 50%;
  max-width: 400px;
  max-height: 400px;
}

img {
  max-width: 100%;
  max-height: 100%;
}

Полагаю, я в конечном итоге пытаюсь выяснить, в чем преимущество помещения изображения в контейнерс различными конфигурациями единицы измерения пиксель / процент.

Answer 1

• Сценарий 1
  • Изображения используют их натуральный размер.Если они меньше, чем flexbox, они выровнены по левому краю или их соответствующему flexbox как текст, образуя два столбца.Если они больше, они переполняются.Поэтому я бы посоветовал против этого.
  • flex: 50% является сокращением для flex-basis: 50%; flex-grow: 1; flex-shrink: 1.Цифры имеют как flex-basis, так и width, что бесполезно.Только flex-base будет рассматриваться.Поэтому алгоритм сначала создаст фигуры на 50% ширины их родительского элемента, а затем либо увеличит их, либо уменьшит их равномерно, чтобы соответствовать указанному родительскому элементу.Как я уже говорил, изображения будут переполнены независимо от их размера.
• Сценарий 2
  • Как и в Сценарии 1, width: 100% на рисункебесполезно.
  • Если изображения и height, и width будут растягиваться, чтобы заполнить их родителя.Я не знаю точный алгоритм, который определяет их размер в этом случае, потому что я никогда не делаю этого.В этом случае я бы рекомендовал установить только width, поэтому высота изображения автоматически выбирается с учетом соотношения сторон.
• Сценарий 3
  • Ширинаа высота 400px на фигуре игнорируется, потому что flex: 50% устанавливает основание flex, имеющее приоритет.
  • Изображение растягивается точно до 400 на 400 пикселей, что может привести к его переполнению по горизонтали.
• Сценарий 4
  • Цифрам сказано, что они не могут вырасти за 400px, поэтому, если 50% их родителей больше этого, они будут иметь ширину 400px.При отсутствии заданной высоты, а так как их дети имеют относительную высоту 100%, их высота устанавливается на максимальную высоту 400 пикселей.Если кто-то знает лучшее объяснение этого поведения, пожалуйста, поделитесь в комментариях.
  • Изображения растягиваются, чтобы полностью заполнить flexbox, теряя их исходное соотношение сторон.
• Сценарий 5
  • Фигуры ведут себя так же, как в сценарии 4.
  • Изображения сохраняют свой первоначальный размер, КРОМЕ ТОГО, если они шире, чем их родительские фигуры, и в этом случае они уменьшаются.Так как установлены max-width и max-height, изображения могут потерять свое исходное соотношение сторон в процессе.

Еще одна рекомендация

Вы нене нужно заставлять цифры расти вообще.Это может быть желательно, если вы хотите стилизовать их и добавить легенды к вашим изображениям.Пример:

section {
  display: flex;
}
figure {
  background-color: #dca;
  padding: 20px;
}
img {
  max-width: 100%;
}

<!-- PS: the width and height attributes on img tags emulate actual image size -->
<section>
  <figure>
    <img width="200" height="100" alt="">
    <legend>Fig. 1</legend>
  </figure>
  <figure>
    <img width="400" height="100" alt="">
    <legend>Fig. 2</legend>
  </figure>
</section>

Flex-стили по умолчанию для любого элемента:

flex-grow: 0;      /* do not grow */
flex-shrink: 1;    /* shrink automatically to fit parent */
flex-basis: auto;  /* but otherwise determine size based on content */

Опять же, вы можете захотеть, чтобы элементы аккуратно помещались в столбцы,в этом случае flex: 50% на обертке вокруг элементов figure может быть лучше.В любом случае, это всегда помогает добавить цвета фона к элементам при тестировании!

Answer 2

• Не устанавливая ширину изображения (сценарий № 1), изображение будет использовать его исходную ширину и высоту, то есть, например, если вы используете изображение с размером 1024 * 768, оно заполняет 1024 пикселя.ширины вашей страницы и 768 пикселей вашей высоты страницы.Это поведение будет игнорировать любую конфигурацию, которую вы использовали для его оболочки, т.е. рисунок.

• Установив ширину img 100%, это означает, что вы заставили элемент придерживаться ширины егоконтейнер (в данном случае рисунок).Таким образом, в этом случае гибкие конфигурации вступают в силу.

• В сценарии № 2 вы установили ширину гибкого элемента (т.е. фигуры) равной 100% его контейнера (то есть сечения).Но это устанавливает начальную ширину фигуры!это означает, что если вы не установили flex-shrink в 0, рисунок будет сжат для соответствия спецификациям Flexbox.
• Спецификация Flexbox гласит, что, хотя flex-wrap является обтеканием, которое является поведением по умолчанию, ширина контейнера будет назначаться элементам одинаково.Поскольку у вас есть два элемента (две цифры), ширина каждого из них будет уменьшена до 50% от его контейнера (т.е. сечения).
• Результат теперь очевиден.Изображение будет уменьшено до 100% его контейнера, который в свою очередь имеет 50% своего контейнера, и вы увидите два изображения рядом друг с другом.
• Когда вы установите ширину: 400px для элемента фигуры, который на месте являетсягибкий элемент, он каким-то образом игнорируется браузером и заменяется рассчитанной шириной браузера.flex-shrink, flex-grow - это два из них.Когда вы говорите, что flex: 50%, вы не изменили значения по умолчанию flex-grow и flex-shrink (т.е. 1), позволяя браузеру сжимать элементы, чтобы расположить их в одну строку (как flex-wrap: nowrap говорит, что делает это!)
• В результате в сценарии № 3, где flex-base составляет 50%, указанная ширина будет игнорироваться, а базовая ширина элемента будет составлять 50% от его контейнера.Но, конечно, они будут сжаты, так что конечная ширина будет чем-то таким, что позволяет элементам рисунка находиться рядом друг с другом, а теги img придерживаются ширины их контейнера и покрывают их (будут изменены, чтобы заполнить их)
• В сценариях № 4 и № 5 вы установили максимальную ширину элемента фигуры.Это уменьшит рассчитанную ширину браузера, что означает, что он будет перезаписывать все, что рассчитывает браузер с использованием вышеуказанных правил.Неважно, указали ли вы ширину с использованием px или процентов. Если рассчитанная браузером ширина больше указанной максимальной ширины, окончательная ширина будет изменена на максимальную ширину.