У меня проблема с созданным мной гибким боксом.

У него есть несколько изображений внутри (каждое в своем собственном DIV-элементе, но это не обязательно), и как только они начинают оборачиваться, они не масштабируются до высоты контейнера и переполняются ... Скрытие переполнения не является решением, потому что изображение требует чтобы быть полностью видимым.

Я заставил их масштабировать в одну строку, и это нормально, но поскольку они такие маленькие, вы больше ничего не видите, я хочу, чтобы они обертывали, НО по-прежнему масштабируются (сохраняя соотношение изображения).

body, html {
  height: 100%;
  margin: 0;
  padding: 0;
  width: 300px;
}

.container {
  display: flex;
  flex-flow: row wrap;
  width: 100%;
  height: 100px;
  background: black;
}

.box {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  align-items: stretch;
}

.box img {
  width: 100%;
  object-fit: contain;
}
<div class="container">
  <div class="box">
    <img src="http://placehold.it/80x80" alt="">
  </div>
  <div class="box">
    <img src="http://placehold.it/80x80" alt="">
  </div>
  <div class="box">
    <img src="http://placehold.it/80x80" alt="">
  </div>
  <div class="box">
    <img src="http://placehold.it/80x80" alt="">
  </div>
  <div class="box">
    <img src="http://placehold.it/80x80" alt="">
  </div>
  <div class="box">
    <img src="http://placehold.it/80x80" alt="">
  </div>
</div>

Решение, которое я ищу, будет заключаться в том, что как только изображения начинают обертываться, они масштабируются по размеру, поэтому они будут формировать 2 ряда уменьшенных изображений.

Может ли кто-нибудь сказать мне, где мой мозг застрял в процессе? Я перепробовал так много разных конфигураций со свойствами flexbox, такими как сжатие, основание и так далее.

Привет Алкахна

3
Alkahna 6 Янв 2018 в 04:22

1 ответ

Лучший ответ

Вы можете добавить изображение в качестве фона и настроить свойство фона, чтобы сохранить соотношение при масштабе:

body,
html {
  height: 100%;
  margin: 0;
  padding: 0;
  width: 400px;
}

.container {
  display: flex;
  flex-flow: row wrap;
  width: 100%;
  height: 100px;
  background: black;
}

.box {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  align-items: stretch;
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
}

.box img {
  width: 100%;
  object-fit: contain;
}
<div class="container">
  <div class="box" style="background-image:url(http://placehold.it/80x80)">

  </div>
  <div class="box" style="background-image:url(http://placehold.it/80x80)">

  </div>
  <div class="box" style="background-image:url(http://placehold.it/80x80)">

  </div>
  <div class="box" style="background-image:url(http://placehold.it/80x80)">

  </div>
  <div class="box" style="background-image:url(http://placehold.it/80x80)">

  </div>
  <div class="box" style="background-image:url(http://placehold.it/80x80)">

  </div>
</div>
2
Temani Afif 6 Янв 2018 в 08:17