文章/答案/技术大牛

发布

社区首页 >问答首页 >试图在网格中组织这些图像

问试图在网格中组织这些图像
EN

Stack Overflow用户

提问于 2022-04-21 00:16:08

回答 1查看 132关注 0票数 1

所以，我正在制作一个网站，只使用html css和javascript，我需要像这样制作一个图像网格，我试着使用flexbox，但是它总是很糟糕……

.row {
  display: flex;
  padding: 100px;
  color: #A3A3A3;
}

.column {
  flex: 50%;
  align-items: center;
}

.home-6 {
  height: 100vh;
  width: 100%;
  background-color: #DBDBDB;
}

.home-6 .row {
  object-fit: cover;
}

<div class="home-6">

  <div class="row">

    <div class="column-1">
      <img src="assets/imgs/projetopessoal/Saba/saba/imghome/imghome.png">
    </div>

    <div class="column">
      <img src="assets/imgs/projetopessoal/Aurora/aurora/imghome/imghome.png">
    </div>

  </div>

  <div class="row">

    <div class="column">
      <img src="assets/imgs/projetopessoal/Tempodachuva/tempodachuva/imghome/imghome.png">
    </div>
    <div class="column">
      <img src="assets/imgs/projetopessoal/Zinebrabas/zinebrabas/imghome/SCARRARD-Portfolio_imagem home_Zine.jpg">
    </div>
    <div class="column">
      <img src="assets/imgs/projetopessoal/Bunker/bunker/home/imghome.png">
    </div>

  </div>

</div>

现在的情况：

我想要的是：

(谢谢你的帮助;)

javascript

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-04-21 02:51:18

为了您的方便，我使用一些示例图像创建了您提到的精确网格。您可以将图像src属性更改为您的愿望。

我首先做了一个21x12 grid。(大小是通过检查给定的期望输出来确定的；您可以根据需要制定比率和更改比率。)

让我们来看看我们做了什么，以及我在这里使用的主要概念。

库div是网格容器，网格项都是直接子元素。当我们使用网格模板列和网格模板行定义网格轨道时，网格为我们提供了称为网格线的编号行，用于项目定位。数字索引可用于引用每条网格线。

默认情况下，列从1开始，从左到右，行从上到下从一行开始。单个列或行由两条网格线组成，两边各一条，因此我们的21列和12行网格由22 column lines and 13 row lines组成。

第一列的起点和终点由垂直线1和2决定。第2和第3行属于第二列，依此类推。类似地，水平线1和2确定第一行的位置，第2和第3行确定第二行的位置，依此类推。了解上面列出的概念将帮助您理解我是如何将每一项(图像)放在网格上的。

因此，我使用以下属性对每个网格项进行样式设置，以便生成所需的输出。

列的

grid-column-start起始网格线，在该列中放置image
grid-column-end结束网格线的列将image
grid-row-start起始网格线放置在放置图像

的行的image

grid-row-end结束网格线。

这里有一个CSS代码片段，用于定位网格中的第一个图像。

.gallery__item--1 {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 3;
}

类似地，您可以使用上述属性定位每个图像，并生成所需的输出。

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit; 
}


html {
  box-sizing: border-box;
  font-size: 62.5%; 
}

body {
  font-family: "Nunito", sans-serif;
  color: #333;
  font-weight: 300;
  line-height: 1.6; 
}

.container {
  width: 60%;
  height: 80%;
  margin: 2rem auto; 
}
.gallery {
  display: grid;
  grid-template-columns: repeat(21, 1fr);
  grid-template-rows: repeat(12, 3vw);
}

.gallery__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery__item--1 {
  grid-column-start: 1;
  grid-column-end: 15;
  grid-row-start: 1;
  grid-row-end: 7;
}
.gallery__item--2 {
  grid-column-start: 15;
  grid-column-end: 22;
  grid-row-start: 1;
  grid-row-end: 7;
}
.gallery__item--3 {
  grid-column-start: 1;
  grid-column-end: 7;
  grid-row-start: 7;
  grid-row-end: 13;
}
.gallery__item--4 {
  grid-column-start: 7;
  grid-column-end: 15;
  grid-row-start: 7;
  grid-row-end: 13;
}
.gallery__item--5 {
  grid-column-start: 15;
  grid-column-end: 22;
  grid-row-start: 7;
  grid-row-end: 13;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>HTML 5 Boilerplate</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="container">
    <div class="gallery">
      <figure class="gallery__item gallery__item--1 ">
    <img src="https://cdn.pixabay.com/photo/2021/08/25/20/42/field-6574455__480.jpg " class="gallery__img " alt="Image 1 ">
  </figure>
  <figure class="gallery__item gallery__item--2 ">
    <img src="https://cdn.pixabay.com/photo/2021/08/25/20/42/field-6574455__480.jpg " class="gallery__img " alt="Image 2 ">
  </figure>
  <figure class="gallery__item gallery__item--3 ">
    <img src="https://cdn.pixabay.com/photo/2021/08/25/20/42/field-6574455__480.jpg " class="gallery__img " alt="Image 3 ">
  </figure>
  <figure class="gallery__item gallery__item--4 ">
    <img src="https://cdn.pixabay.com/photo/2021/08/25/20/42/field-6574455__480.jpg " class="gallery__img " alt="Image 4 ">
  </figure>
  <figure class="gallery__item gallery__item--5 ">
    <img src="https://cdn.pixabay.com/photo/2021/08/25/20/42/field-6574455__480.jpg " class="gallery__img " alt="Image 5 ">
  </figure>
</div>
</div>
</body>

</html>

这是你的拼贴：

这是所需的输出：

这是上述代码提供的输出：

我希望这对你有帮助。还有，祝你工作顺利！谢谢!

票数 4

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/71947542

复制

相似问题

问试图在网格中组织这些图像
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问试图在网格中组织这些图像EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问试图在网格中组织这些图像
EN