Как создать сетку элементов (divs/spans) в идеальных квадратах с их фонами, установленными на изображения

Question

Я работаю над веб-сайтом, который служит галереей для фантастического искусства, развивающегося проекта, и в настоящее время я попал в баррикаду, куда идти от чего-то, с чем я не могу работать. Я попробовал масонство и Вукмарк, и у меня были проблемы с обоими, поэтому я пытаюсь сделать что-то еще. Я хочу, чтобы появляться в div или span (я не уверен, что использовать) в пределах grid с идентификатором класса images и устанавливать их фоны на определенные источники изображений, которые «покрывают», центрируются, поэтому я в основном имею сетку квадратные окна в эти изображения, и при нажатии на них появляется лайтбокс (который я успешно создал). Прямо сейчас мне удалось получить изображения, чтобы показать, но контейнеры сглажены и не имеют прокладки влево или вправо.

По правде говоря, я понятия не имею, что делать с параметрами относительного/абсолютного позиционирования и встроенного/блочного отображения, и я чувствую, что именно здесь я ошибаюсь, но я не знаю, что это за вещи ,

Сегмент HTML:

<div id="grid" class="grid"></div> 
<br> 

CSS:

.grid { 
    z-index:2; 
    display: inline-block; 
} 

.images { 
    display:inline-block; 
    position:relative; 
    width:25%; 
    height:25%; 
    z-index:2; 
    padding-right: 0.25em; 
    padding-left: 0.25em; 
    padding-top: 0.5em; 
    background-size: cover; 
    background-attachment: fixed; 
    background-repeat: no-repeat; 
    background-position: center; 
} 

Javascript:

var mix = shuffle(Object.keys(backInfo));     


function unlockImages() {  
    setTimeout(function() {   
    if (mix !== undefined) { 
     var input = mix.shift(); 
     var entry = backInfo[input]; 
     var elem = document.createElement("div"); 
     elem.setAttribute("class", "images"); 
     elem.setAttribute("id", input); 
     elem.setAttribute("title", entry.caption); 
     elem.setAttribute("onclick", "javascript:changeImage(" + input + ");"); 
     document.getElementById("grid").appendChild(elem); 
     document.getElementById(input).style.backgroundImage = "url(" + entry.image + ")"; 
     $("#" + input).fadeTo(0,0); 
     $("#" + input).fadeTo(20000,1); 
     unlockImages(); 
    } 
    }, 0) 
} 

И предварительный просмотр того, что происходит в данный момент: http://www.dreamquest.io

Answer 1

Я думаю, что проблема, которую вы описываете CSS. Я играл с CSS немного и придумал это:

.grid { 
    z-index:2; 
    display: inline-block; 
    height: 500px; 
    width: 1500px; 
} 

.images { 
    display:inline-block; 
    position:relative; 
    width:25%; 
    height:25%; 
    z-index:2; 
    margin-right: 0.25em; 
    margin-left: 0.25em; 
    margin-top: 0.5em; 
    background-size: cover; 
    background-repeat: no-repeat; 
    background-position: center; 
} 

Некоторые вещи, чтобы отметить с помощью CSS:

1. когда вы устанавливаете процент ширина х высота, ваш родительский контейнер должен иметь ценность. Так как вы не задали значение высоты в классе .grid, ваши изображения обжигаются, потому что он принимает 25% от 0 высоты.
2. background-attachment: fixed; заставляет ваше изображение не автомасштабировать, и я предполагаю, что вы хотите использовать прописку, поэтому вы не получаете промежуток между изображениями. Прокладка для интерьера элемента. Если вам нужно пространство между элементами, вам нужно использовать margin, который я использовал в приведенном выше css. hth

Answer 2

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

1. создать контейнер div с идентификатором «обертка».

2. Добавить функцию Javascript и назвать ее где угодно.

   функция DrawGrid() {

   var rows = 2; 
       var columns = 2; 
   
       $("#wrapper").empty(); 
   
       for (var i = 0; i < rows; i++) { 
   
        var $row = $("<div />", { 
         class: 'row' 
        }); 
   
        //add columns to the the temp row object 
        for (var c = 0; c < columns; c++) { 
   
   
   
         var $square = $("<div />", { 
          class: 'square' 
         }); 
   
         //Set your imageHere 
         $square.append("<img></img>"); 
   
   
         $row.append($square.clone()); 
        } 
   
   
        $("#wrapper").append($row.clone()); 
       } 
   
   }