Как можно динамически изменить размер дочерних элементов в равной степени, чтобы оптимизировать заполнение родительского контейнера с помощью stati c height / width - PullRequest
Новая
       36

Как можно динамически изменить размер дочерних элементов в равной степени, чтобы оптимизировать заполнение родительского контейнера с помощью stati c height / width

0 голосов
/ 23 апреля 2020

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

Я нашел это решение, которое, кажется, отлично подходит для оптимальной организации элементов по строкам и столбцам, но оно основано на элементах фиксированного размера. Я в основном хочу, чтобы это также масштабировало height-width, чтобы заполнить контейнер настолько, насколько это возможно, и остановиться на / перед переполнением. Создание CSS сетки, которая течет по столбцам, с динамическими c столбцами и строками, основанными на содержимом 

#container {
  border:3px solid orange;
  width:250px;
  height:250px;
}

#grid {
  border: 1px solid red;
  column-width: 50px;
  column-gap: 0px;
}

#grid > div {
  break-inside: avoid-column; /* Prevent element from breaking */
  page-break-inside: avoid; /* Prevent element from breaking in Firefox */
  background: gray;
  border:1px solid blue;
}

<div id="container">
  <div id="grid">
    <div><img src="https://www.w3schools.com/tags/smiley.gif" alt="Smiley face" style="object-fit: cover;"></div>
    <div><img src="https://www.w3schools.com/tags/smiley.gif" alt="Smiley face" style="object-fit: cover;"></div>
    <div><img src="https://www.w3schools.com/tags/smiley.gif" alt="Smiley face" style="object-fit: cover;"></div>
    <div><img src="https://www.w3schools.com/tags/smiley.gif" alt="Smiley face" style="object-fit: cover;"></div>
    <div><img src="https://www.w3schools.com/tags/smiley.gif" alt="Smiley face" style="object-fit: cover;"></div>
    <div><img src="https://www.w3schools.com/tags/smiley.gif" alt="Smiley face" style="object-fit: cover;"></div>
    <div><img src="https://www.w3schools.com/tags/smiley.gif" alt="Smiley face" style="object-fit: cover;"></div>
    <div><img src="https://www.w3schools.com/tags/smiley.gif" alt="Smiley face" style="object-fit: cover;"></div>
    <div><img src="https://www.w3schools.com/tags/smiley.gif" alt="Smiley face" style="object-fit: cover;"></div>
    <div><img src="https://www.w3schools.com/tags/smiley.gif" alt="Smiley face" style="object-fit: cover;"></div>
    <div><img src="https://www.w3schools.com/tags/smiley.gif" alt="Smiley face" style="object-fit: cover;"></div>
    <div><img src="https://www.w3schools.com/tags/smiley.gif" alt="Smiley face" style="object-fit: cover;"></div>
  </div>
</div>

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

https://jsfiddle.net/sjdx83v9/1/

...