I want to add a block with pictures to the page. This block should occupy the entire height and width of the page. The number of pictures in the block is unknown in advance. Pictures are always all the same size and should be aligned relative to each other vertically and horizontally. Pictures should not go beyond the block. Is it possible to implement this without using js, only with CSS? If so, please kick in the right direction how to do it correctly.

An example of how it will look with a lot of pictures: enter image description here

An example of how it will look with fewer pictures: enter image description here

    3 answers 3

    This is done by writing the css for each case using the number of requests method. Only if the number of elements is within the limits of reasonable value.

      Parent unit set display: flex; flex-wrap: wrap; display: flex; flex-wrap: wrap; . In this way, it will contain all the elements, narrowing them. To place them in several rows - you need flex-wrap , and for elements, respectively, size and margin . But it may be that some one element simply will not fit on the right, so it is better to set flex-grow: 1; pictures flex-grow: 1; that will make them all stretch to the required size. Also, for everyone, add max-width , but this is optional.

      Here is my result.

      To scale images make size in percent and height: auto; max-height: Ρ€Π°Π·ΠΌΠ΅Ρ€; height: auto; max-height: Ρ€Π°Π·ΠΌΠ΅Ρ€; .

      • I also tried to do C flex, but the problem is that if the number of elements starts to increase, then they will come out of the screen and a scroll will appear. those. Not all elements fit in the screen. codepen.io/anon/pen/vbqZKJ Is it possible to somehow restrict them to decrease, but continue to fit in only one screen? - se0ga
      • @ se0ga Use js? - Vitaliy Shebanits February
      • It was interesting to do without using js just. Made by option @ 4e4e4i. The user has thrown off a very interesting article. - se0ga 8:08 pm

      A variant that uses CSS Grid Layout and Jquery.
      In the snippet code comments are used, I think it will be clear.

       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>

      On pure CSS, it is unlikely to be able to do this simply (that is, using the minimum amount of code), as an option to pervert on the proposal @ 4e4e4i