Question

我目前正在搞一个小项目。我想在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>

有人知道如何制作类似的东西吗？

亲切的问候

最大

Answer 1

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

例如：您在项目的根目录中有index.html，在项目root / img中有图像，那么您可以使用到项目根的相对路径，绝对路径必须来自服务器/机器-根目录。

尝试使用以下相对路径语法：

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

使用不带IMG标签的CSS制作照片网格

1 个答案: