2

Хочу добавить на страницу блок с картинками. Этот блок должен занимать всю высоту и ширину страницы. Количество картинок в блоке заранее неизвестно. Картинки всегда все одного размера и должны выравниваться относительно друг друга по вертикали и горизонтали. Картинки не должны выходить за пределы блока. Можно ли это реализовать без использования js, только лишь с CSS? Если да, то пните, пожалуйста, в нужную сторону как это правильно делать.

Пример как это будет выглядеть с большим количеством картинок: введите сюда описание изображения

Пример как это будет выглядеть с меньшим количеством картинок: введите сюда описание изображения

3 ответа 3

0

Делается это через написание css для каждого отдельного случая с использованием метода количество запросов. Только если количество элементов находится в переделах разумного значения.

0

Родительскому блоку задай display: flex; flex-wrap: wrap;. Таким способом оно будет вмещать в себя все элементы, сужая их. Чтобы разместить их в несколько рядов - нужен flex-wrap, а для элементов, соответственно, размер и margin. Но может быть такое, что какой то один элемент просто не будет влезать справа, поэтому картинкам лучше задать flex-grow: 1;, что заставит их всех растянуться до необходимого размера. Так же, на всякий, добавить max-width, но это по желанию.

Вот мой результат.

Для масштабирования картинок сделай размер в процентах и height: auto; max-height: размер;.

3
  • C flex я вот также пытался сделать, но проблема в том, что если количество элементов начинает увеличиваться, то они вылезут за границу экрана и появится скролл. т.е. не все элементы поместятся в экран. codepen.io/anon/pen/vbqZKJ Можно ли как-то ограничить, чтобы они уменьшались, но продолжали помещаться только в один экран?
    – se0ga
    22 фев 2019 в 9:52
  • @se0ga Использовать js? 22 фев 2019 в 23:21
  • Интересно было сделать без использования js просто. Сделал по варианту @4e4e4i . Очень интересную статью пользователь скинул.
    – se0ga
    23 фев 2019 в 20:08
0

Вариант который использует CSS Grid Layout и Jquery.
В сниппете используются комментарии к коду, думаю будет понятно.

function CreatGrid() {
  let parent = $('.content'), // Сам родитеель
      child = parent.find('.item'), // Элементы "сетки"
      lenChild = child.length, // Кол-во элементов
      rowLen = 3; // Начальное\минимальное кол-во элементов по горизонтали
  if(lenChild > 0 && lenChild <= 10) rowLen = 3; else
  if(lenChild > 10 && lenChild <= 15) rowLen = 4; else
  if(lenChild > 15 && lenChild <= 20) rowLen = 5; else
  if(lenChild > 20 && lenChild <= 25) rowLen = 6; else
  if(lenChild > 25 && lenChild <= 50) rowLen = 7; else
  if(lenChild > 50 && lenChild <= 75) rowLen = 8; else
  if(lenChild > 75 && lenChild <= 100) rowLen = 9; else
  if(lenChild > 100) rowLen = 10; // Максимальное кол-во элементов по горизонтали
  
  parent.css('grid-template-columns', 'repeat('+rowLen+', 1fr)'); // Это кол-во элементов по горизонтали, при помощи grid-block
  child.height(child.width()); // Даём элементам такую же высотку как и ширину
}
CreatGrid(); // Запускаем при отрисовке страницы
// Советую его засунуть ещё и в $(window).resize();


// Всё что ниже просто для визуализации
$('.button').on('click', 'input', function(){
  console.clear();
  if($(this).hasClass('add')) {
    $('.content').append('<div class="item"></div>');
    console.info('elem .item +1');
  } else if($(this).hasClass('rmv')) {
    $('.content .item:last-child').remove();
    console.info('last elem .item remove');
  } else if($(this).hasClass('rnm')) {
    let len = Math.floor(Math.random() * 100);
    $('.content').html('');
    for(let i=0; i<len; i++) $('.content').append('<div class="item"></div>');
    console.info('creat elem .item '+(len+1));
  } else if($(this).hasClass('rma')) {
    $('.content').html('');
    console.info('all elem .item');
  }
  CreatGrid();
  //
  $('.content').find('.item').each(function(){
    let arr = ['https://image.flaticon.com/icons/svg/1146/1146298.svg','https://image.flaticon.com/icons/svg/1146/1146338.svg','https://image.flaticon.com/icons/svg/1146/1146322.svg','https://image.flaticon.com/icons/svg/1146/1146314.svg','https://image.flaticon.com/icons/svg/1146/1146320.svg','https://image.flaticon.com/icons/svg/1146/1146329.svg','https://image.flaticon.com/icons/svg/1146/1146325.svg','https://image.flaticon.com/icons/svg/1146/1146339.svg','https://image.flaticon.com/icons/svg/1146/1146342.svg','https://image.flaticon.com/icons/svg/1146/1146343.svg','https://image.flaticon.com/icons/svg/1146/1146309.svg'],
        rnm = Math.floor(Math.random() * 11);
    $(this).css('background-image', 'url("'+arr[rnm]+'")');
  });
});
@import url('https://use.fontawesome.com/releases/v5.7.2/css/all.css');

.button {margin-bottom: 10px;}
.button .add {color: green;}
.button .rmv {color: red;}

.content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  min-height: 100px;
  background: #999;
  border-radius: 5px;
  padding: 10px;
  box-sizing: border-box;
}

.content .item {
  display: block;
  border-radius: 5px;
  max-width: 80px;
  max-height: 80px;
  background: #ddd no-repeat center center / 90%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--  -->
<div class="button">
  <input class="add" type="button" value="add">
  <input class="rmv" type="button" value="remove">
  <input class="rnm" type="button" value="random">
  <input class="rma" type="button" value="remove all">
</div>
<div class="content">
</div>

На чистом CSS вряд ли получится это сделать просто (т.е. использую минимальное кол-во кода), как вариант извращаться по предложению @4e4e4i

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.