如何在背景设置为图像的完美正方形中创建元素网格 (divs/spans)

Question

我一直在一个网站上工作，该网站用作幻想艺术的画廊，这是一个不断发展的项目，目前我遇到了一个障碍，不知道从哪里开始我无法工作。我尝试了 Masonry 和 Wookmark，但都遇到了问题，所以我正在尝试做其他事情。我想在 grid 中使用 class 标识符 images 在 div 或 span 中生成（我不确定要使用哪个），并将它们的背景设置为特定的图像源 "cover"，居中，所以我基本上在这些图像中有一个正方形网格 windows，单击时，它们会弹出一个灯箱（我已成功创建）。现在我已经设法让图像显示出来，但是容器被压扁了并且没有左右填充。

说实话，我不知道如何处理 relative/absolute 定位和 inline/block 显示参数，我觉得这是我出错的地方，但我不知道这些东西真的意味着什么。

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

我假设您想要创建动态网格并为每个框填充图像。使用下面的代码来实现它。

创建 ID 为 "wrapper" 的容器 div。

添加 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());
    }

}

Answer 2

我认为您描述的问题是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需要注意的一些事项：

当您设置宽度 x 高度的百分比时，您的父容器必须有一个值。由于您没有在 .grid class 中设置高度值，您的图像会被压扁，因为它占据了 0 高度的 25%。
背景附件：已修复；强制你的图片不自动调整大小，我假设你想要
您使用了填充，这就是为什么您没有获得图像之间的间距的原因。填充用于元素的内部。如果你想在元素之间使用 space 那么你需要使用边距，我在上面的 css 中使用了它。 hth

如何在背景设置为图像的完美正方形中创建元素网格 (divs/spans)

How to create a grid of elements (divs/spans) in perfect squares with their backgrounds set to images

javascript

html

css

positioning