Как сохранить изображения с таким же соотношением сторон в CSS при использовании flexbox? - PullRequest
Новая
       11

Как сохранить изображения с таким же соотношением сторон в CSS при использовании flexbox?

0 голосов
/ 06 мая 2019

У меня есть много изображений, выложенных с помощью flexbox. Большинство изображений имеют соотношение сторон 2: 1, но некоторые не имеют (могут быть слишком широкими или слишком высокими). Я бы хотел, чтобы эти изображения в любом случае оставались в формате 2: 1.

В https://jsfiddle.net/5h0gx7L4/ вы можете видеть, что слишком широкая рамка хороша и остается в соотношении сторон 2: 1 (не уверен, но возможно, потому что flex-basis контролирует ширину), но та, которая слишком высока, ломается из соотношения сторон 2: 1, даже если оно должно содержаться.

Я не могу использовать какие-либо жестко заданные высоты, потому что это гибкий и отзывчивый дизайн, и все масштабируется по мере изменения размера окна. Но элементы div, содержащие изображения, должны иметь соотношение сторон 2: 1, чтобы любые содержащиеся в них изображения содержались внутри и не становились больше. 

div
{
  display: flex;
  flex-wrap: wrap;
}

div > div {
  flex-basis: 25%;
}

img {
  border: 1px solid black;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
<div>
  <div><img src=https://placeholder.pics/svg/400x200/FF9A9A></div>
  <div><img src=https://placeholder.pics/svg/400x200/FF9A9A></div>
  <div><img src=https://placeholder.pics/svg/800x200/FF9A9A></div>
  <div><img src=https://placeholder.pics/svg/400x200/FF9A9A></div>
  <div><img src=https://placeholder.pics/svg/400x200/FF9A9A></div>
  <div><img src=https://placeholder.pics/svg/400x400/FF9A9A></div>
  <div><img src=https://placeholder.pics/svg/400x200/FF9A9A></div>
</div>

Ответы [ 2 ]

1 голос
/ 07 мая 2019

Попробуйте это: 

div {
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
}

div > div {
    flex-basis: 25%;
    display: block;
    padding-bottom: 12.5%;
    height: 0;
    position: relative;
}

img {
    border: 1px solid black;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    box-sizing: border-box;
}
<div>
    <div><img src="https://placeholder.pics/svg/400x200/FF9A9A"></div>
    <div><img src="https://placeholder.pics/svg/400x200/FF9A9A"></div>
    <div><img src="https://placeholder.pics/svg/800x200/FF9A9A"></div>
    <div><img src="https://placeholder.pics/svg/400x200/FF9A9A"></div>
    <div><img src="https://placeholder.pics/svg/400x200/FF9A9A"></div>
    <div><img src="https://placeholder.pics/svg/400x400/FF9A9A"></div>
    <div><img src="https://placeholder.pics/svg/400x200/FF9A9A"></div>
</div>
0 голосов
/ 06 мая 2019

Вы можете установить высоту на ноль и использовать padding-top или padding-bottom для соотношения сторон, поскольку оно основано на ширине элемента. В вашем случае это должно выглядеть так: 

div > div {
  flex-basis: 25%;
  height: 0;
  padding-bottom: 12.5%; /* 25/2 = 2:1 */
}

Обновлен jsfiddle

Редактировать: игнорировать мой ответ, см. Комментарии и решение Кравимира

...