使用没有 IMG 标签的 CSS 制作照片网格答案

【问题标题】：Make a photo grid using CSS without IMG tags使用没有 IMG 标签的 CSS 制作照片网格
【发布时间】：2018-11-05 15:56:14
【问题描述】：

我目前正在搞一个小项目。我想在 HTML5 中制作一个 3x4 图片的照片网格（不使用 Div）。我还想在 CSS 中添加所有图片。所以 HTML 文件中没有 img 标签。

网格还需要响应式，当您将其从桌面缩放到平板电脑大小时，它需要变成 2x4 照片网格

和手机一样，需要改为1x4。

我已经设法制作了一个 3x4 网格。我正在努力在 CSS 中添加图片。我已经尝试过正常的： background-image: url('picture.jpg');但由于某种原因，这不起作用。

同时让所有东西都可扩展是行不通的。我尝试过使用媒体查询，但没有成功。

我的代码：

#Product_grid{
  width: 100%;
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 20px;
  justify-content: center;
  margin: 10px;
}
.Product_img{
  width: 100%;
  height: 100%;
}
.grid-item1{
  display: block;
  width: 100%;
  height: 100%;
  margin: 20px;
  border-style: solid;
  border-width: 3px;
}
.grid-item2{
  display: block;
  width: 100%;
  height: 100%;
  margin: 20px;
  border-style: solid;
  border-width: 3px;
}
.grid-item3{
  display: block;
  width: 100%;
  height: 100%;
  margin: 20px;
  border-style: solid;
  border-width: 3px;
}
.grid-item4{
  display: block;
  width: 100%;
  height: 100%;
  margin: 20px;
  border-style: solid;
  border-width: 3px;
}
.grid-item5{
  display: block;
  width: 100%;
  height: 100%;
  margin: 20px;
  border-style: solid;
  border-width: 3px;
}
.grid-item6{
  display: block;
  width: 100%;
  height: 100%;
  margin: 20px;
  border-style: solid;
  border-width: 3px;
}
.grid-item7{
  display: block;
  width: 100%;
  height: 100%;
  margin: 20px;
  border-style: solid;
  border-width: 3px;
}
.grid-item8{
  display: block;
  width: 100%;
  height: 100%;
  margin: 20px;
  border-style: solid;
  border-width: 3px;
}
.grid-item9{
  display: block;
  width: 100%;
  height: 100%;
  margin: 20px;
  border-style: solid;
  border-width: 3px;
}
.grid-item10{
  display: block;
  width: 100%;
  height: 100%;
  margin: 20px;
  border-style: solid;
  border-width: 3px;
}
.grid-item11{
  display: block;
  width: 100%;
  height: 100%;
  margin: 20px;
  border-style: solid;
  border-width: 3px;
}
.grid-item12{
  display: block;
  width: 100%;
  height: 100%;
  margin: 20px;
  border-style: solid;
  border-width: 3px;
}

  <article id="Product_grid">
	   <section class="grid-item1"></section>
     <section class="grid-item2"></section>
     <section class="grid-item3"></section>
     <section class="grid-item4"></section>
     <section class="grid-item5"></section>
     <section class="grid-item6"></section>
     <section class="grid-item7"></section>
     <section class="grid-item8"></section>
     <section class="grid-item9"></section>
     <section class="grid-item10"></section>
     <section class="grid-item11"></section>
     <section class="grid-item12"></section>
</article>

有人知道如何制作这样的东西吗？

亲切的问候，

最大

【问题讨论】：

这样说，这个问题太笼统了。您是否已经有任何代码，是否需要做出响应？这样的问题是可以回答的。否则，这听起来就像你在要求这里的人为你做你的工作。让我说，您提到“不使用 div”听起来您已经在其中考虑了一些想法，并且您已经决定使用一种方法而不是其他方法，还是我读错了？
如何将图像添加到带有<img>-标签的部分？就像使用 javasript 创建 <img> 并将其附加到每个部分一样？

标签： css html grid css-grid

【解决方案1】：

问题是您必须在要包含的图片的相对路径或绝对路径之间做出决定。

例如：您的 index.html 位于项目的根目录中，图像位于 projectroot/img 目录中，然后您可以使用项目根目录的相对路径，绝对路径必须来自服务器/机器-根目录。

尝试使用这种相对路径语法：

section{ background-image: url("../imagedirectory/image.jpg");

【讨论】：