Сделать элементы контейнера заполнить высоту контейнера, оборачивая - PullRequest
Новая
       5

Сделать элементы контейнера заполнить высоту контейнера, оборачивая

0 голосов
/ 18 февраля 2020

У меня проблема с попыткой заставить элементы в контейнере занимать место так, как я хочу. Кажется, что главная проблема заключается в том, что flex box и сетка css сделаны адаптированными к изменениям ширины, а не высоты, где мне нужно противоположное поведение. Это в основном то, что я хочу, чтобы мои элементы делали

Проверка желаемый эффект здесь .

Я пробовал использовать как flex box, так и сетку css. Это мой текущий код, также содержащий некоторые остатки моей предыдущей попытки. Это просто заставляет изображения отображаться в их реальном размере. Высота медиа-контейнера изменяется с помощью javascript. 

.display-img {
  padding:0px;
  margin-top:-4px;
  margin-bottom:-4px;
  flex:0 1 auto;
  height:auto;
}

.media-container{
  width: auto;
  height:800px;
  display:flex;
  //grid-template-rows: repeat(auto-fit,auto);
  //grid-template-columns: repeat(auto-fit,minmax(200px,0.5fr));
  flex-direction: row;
  align-items: flex-start;
  flex-wrap: wrap;
  visibility: hidden;
}
<div class="media-container">
  <img class="display-img" src="assets/projects/feierlichkeiten/23.png"></img>
  <img class="display-img" src="assets/projects/feierlichkeiten/22.png"></img>
  <img class="display-img" src="assets/projects/feierlichkeiten/21.png"></img>
  <img class="display-img" src="assets/projects/feierlichkeiten/20.png"></img>
  <img class="display-img" src="assets/projects/feierlichkeiten/19.png"></img>
</div>

Спасибо всем, у кого есть идеи.

Ответы [ 3 ]

0 голосов
/ 18 февраля 2020

Я также довольно смущен вашим запросом. Размещенный вами скриншот, который вы хотите скопировать, представляет собой стандартное поведение с сеткой css. Так что, возможно, я неправильно понял. Вот кодовая ручка с правильными настройками для копирования размещенного вами снимка экрана:

https://codepen.io/doughballs/pen/bGdeBQa

На контейнере мы установили: 

main {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  border: 2px solid red;
  padding: 20px;
}

Это говорит о том, что содержимое должно иметь ширину не менее 200 пикселей и переноситься, если недостаточно места.

И на изображениях: 

img {
  display: block;
  width:100%;
  border: 2px solid black;

}

Это отличный ресурс от Джен Симмонс:

https://www.youtube.com/watch?v=tFKrK4eAiUQ&t=218s

0 голосов
/ 18 февраля 2020

Для вашего желаемого эффекта, давайте использовать контейнер с носителем 'child', где каждый дочерний элемент имеет свое содержимое. 

<div class="media-container">
    <div class='media'>
        <img class="display-img" src="https://picsum.photos/160">
    </div>
    <div class='media'>
        <img class="display-img" src="https://picsum.photos/160/90">
    </div>
    <div class='media'>
        <img class="display-img" src="https://picsum.photos/150/40">
    </div>
    <div class='media'>
        <img class="display-img" src="https://picsum.photos/160/100">
    </div>
    <div class='media'>
        <img class="display-img" src="https://picsum.photos/100/290">
    </div>
</div>

Правило, которое вы искали, было 'flex-wrap: wrap' 

.media-container{
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    width: 100%;
}

.media-container .media{
    width: 33%;
}

Вы можете играть со значениями и подбирать более подходящие для вас.

И, пожалуйста, используйте Webpack для css префиксов

0 голосов
/ 18 февраля 2020

Ваш вопрос не кажется мне очень понятным.

Если вы хотите получить ряд изображений, все из которых имеют свой исходный размер, все, что вам нужно сделать, это применить гибкое выравнивание (строка и wrap) к родителю и добавьте flex: auto с margin: auto; к дочерним элементам: 

<div class="media-container">
  <img class="display-img" src="https://picsum.photos/160">
  <img class="display-img" src="https://picsum.photos/160/90">
  <img class="display-img" src="https://picsum.photos/150/40">
  <img class="display-img" src="https://picsum.photos/160/100">
  <img class="display-img" src="https://picsum.photos/100/290">
</div>

[Добавлены изображения со случайным соотношением сторон, чтобы доказать, что все они выровнены, независимо от размера всех ваших изображений, имеющих одинаковые соотношение сторон, результат будет таким же, как в вашем примере изображения] 

.media-container {
  display: flex;
  flex-flow: row wrap;
}

.display-img {
  margin: auto;
  flex: auto;
}

Это делает следующее:

  • media-container: установите для flex-потока значение row и wrap, поэтому, когда добавляется больше изображений, они помещаются в новую строку, если свободного места больше нет.
  • на изображениях, margin auto позаботится о выравнивании изображения внутри каждой ячейки (как по горизонтали, так и по вертикали). ) и flex: auto, что эквивалентно flex: 1 1 auto (имеется в виду, что flex растут, а flex сжимаются равными единице, без роста, без сжатия и flex-base для auto [начальный основной размер элемента flex]).

Проверьте т он этот кодекс .

...