Как автоматически изменить размер массива изображений в фиксированном контейнере без переполнения, прокрутки, медиазапросов? - PullRequest
Новая
       12

Как автоматически изменить размер массива изображений в фиксированном контейнере без переполнения, прокрутки, медиазапросов?

0 голосов
/ 07 января 2020

Я получаю массив квадратных изображений от API для отображения в приложении React. Количество изображений варьируется от 1 до 14. Размеры изображений, которые я получаю от API, равны квадратам 200, 512 или 600 пикселей. Отображаемые изображения имеют соответствующие номиналы джекпота и суммы джекпота, отображаемые под изображениями, и заголовок над ними. Дисплей может отображать от 1 до 5 наименований и соответствующие суммы, которые должны быть одинакового размера - сокращать их нельзя.

Мое приложение будет отображаться в офисе, в разрешении 1920 x 1080 Вт. экран, без прокрутки возможно. Изменение размера экрана будет невозможно, и, следовательно, не будет медиазапросов.

Дисплей будет вращаться каждые десять секунд, так что будет отображаться новый набор изображений. Я приложил ссылку к ссылке CodeSandbox - https://codesandbox.io/s/jackpot-ufs5t - с грубой копией моего приложения (без поворота, без вызовов API), с базовыми c смоделированными данными в imageList. js файл, который действует как поддельный API.

Я хочу, чтобы изображения помещались в контейнер в верхней части экрана, под заголовком и над номиналами / суммами джекпота. Если есть несколько изображений (6 или меньше), я хочу, чтобы они имели определенную высоту и ширину (квадрат 303px выглядит хорошо). Если существует более 6 изображений, я хочу, чтобы высота и ширина пропорционально уменьшались, чтобы они все помещались в контейнере, между заголовком и суммой джекпота.

Все выглядит красиво, когда есть только несколько изображений и 1 -3 номинала джекпота. Однако наихудший сценарий - 14 изображений и 5 номиналов джекпота - это катастрофа.

Flexbox с включенной функцией flex-wrap хорошо подходит для автоматической подгонки изображений и их уменьшения в случае уменьшения размера контейнера. Но здесь дело не в этом, чем больше изображений, они просто перекрывают то, что выше или ниже их.

Я использовал CSS -Grid в прикрепленном примере CodeSandbox, который я также не могу заставить работать.

Использование файла imageList в CodeSandbox, комментирование и раскомментирование данных будут варьировать количество отображаемых изображений и суммы джекпота.

Что я сделал, чтобы это работало (не показано в CodeSandbox) состоит в том, чтобы условно назначать разные классы изображениям и контейнеру на основе каждой различной комбинации длин массива изображений и массива джекпотов. Но я чувствую, что должен быть лучший способ, с Flexbox или CSS -Grid, чтобы автоматически уменьшать размер квадратных изображений, основываясь исключительно на их количестве. Я не прав?

В настоящее время меня беспокоит только вертикальное отображение (портрет), а не горизонтальное (альбомное).

Повторная ссылка CodeSandbox: https://codesandbox.io/s/jackpot-ufs5t

1 Ответ

0 голосов
/ 07 января 2020

Что вы можете сделать, так это определить сетку внутри вашего класса container-logos и иметь логотипы, которые будут иметь 100% ширины и высоты виртуального пространства, создаваемого сеткой css.

Так что в основном все, что вам нужно сделать, это:

  • добавить grid-template-rows: repeat(auto-fit, minmax(79px, 1fr)); к уже существующему классу .container-logos.
  • Удалите все, что у вас есть в вашем классе .logo, и добавьте height: 100%; width: 100%;.

Вот также краткий пример того, что я описал: 

body{
    margin: 0;
    padding: 0;    
    box-sizing: border-box;
    height: 100vh;
    display: grid;
    place-items: center;
}

.container-logos{
  max-height: 50vh;
  max-width: 50vw;
  width:50vw;
  height:50vh;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(45px, 1fr));
  grid-template-rows: repeat(auto-fit, minmax(45px, 1fr));
  grid-gap: 10px;
}

.logo{
  width: 100%;
  height: 100%;
  background-color: red;
}
<div class="container-logos">

  <div class="logo"></div>
  <div class="logo"></div>
  <div class="logo"></div>
  <div class="logo"></div>
  <div class="logo"></div>
  <div class="logo"></div>
  <div class="logo"></div>
  <div class="logo"></div>
  <div class="logo"></div>
  <div class="logo"></div>
  <div class="logo"></div>
  <div class="logo"></div>
  <div class="logo"></div>
  <div class="logo"></div>

</div>

Вы также можете попытаться удалить / добавить несколько "логотипов" из моего примера, чтобы посмотреть их размеры увеличения / уменьшения в соответствии с доступным пространством.

Кроме того, вот быстрый пример того, как я мог бы получить ваш пример, выполнив объяснение выше:

Example modified

...