创建不同大小的图像列表答案

【问题标题】：create list of image in different size创建不同大小的图像列表
【发布时间】：2021-10-01 05:16:18
【问题描述】：

我有很多图片，我想创建一个这样的图片列表：

但是我生成了这个列表和图片没有正确放置：

【问题讨论】：

您的所有图像都是正方形的，并且只有小尺寸或该面积的四倍（加上它们的填充），即它是特定的图像拟合案例还是更一般的案例？
是的，所有图片都是方形的，图片索引 0、13 和 26 更大。

标签： html css image

【解决方案1】：

对于这种特定情况，您可以只使用带有模板区域的网格，因为这样可以很好地控制定位。

基本上您的网格将有六列和六行。

我很快就会回来并提出一个 sn-p 但我认为您可能会立即喜欢这个想法并在使用时考虑它。

更新：这是一个使用网格的 sn-p。显然，您需要将正确的背景图像放入每个 div。

.container {
  display: grid;
  grid-template-columns: repeat(6, 12vw);
  grid-template-rows: repeat(6, 12vw);
  grid-gap: 1vw;
}

.container div:nth-child(1) {
  grid-row: 1/span 2;
  grid-column: 1/span 2;
}

.container div:nth-child(14) {
  grid-row: 3/ span 2;
  grid-column: 3/ span 2;
}

.container div:nth-child(27) {
  grid-row: 5/ span 2;
  grid-column: 5/ span 2;
}

.container div {
  background-image: url(https://i.stack.imgur.com/ukCns.jpg);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

【讨论】：

【解决方案2】：

一种方法是将内容分组到 html 组中并以这种方式控制它们。仅取决于您尝试做的事情的整体应用。这也是响应式的。

img {
    width: 100%;
    display: flex;
}
.row {
    display: flex;
}
@media(max-width: 768px){
    .row {
        flex-direction: column;
    }
}
.row .group.count-1,
.row .group.count-4 {
    width: 33%;
}
@media(max-width: 768px){
    .row .group.count-1,
    .row .group.count-4 {
        width: 100%;
    }
}
.row .group.count-4 {
    display: flex;
    flex-wrap: wrap;
}
.row .group.count-1 img,
.row .group.count-4 img {
    margin: 1%;
}
@media(max-width: 768px){
    .row .group.count-1 img,
    .row .group.count-4 img {
        margin: 0 0 1%;
    }
}
.row .group.count-1 img {
    width: 98%;
}
@media(max-width: 768px){
    .row .group.count-1 img {
        width: 100%;
    }
}

.row .group.count-4 img {
    width: 48%;
}
@media(max-width: 768px){
    .row .group.count-4 img {
        width: 100%;
    }
}

<div class="container">
    <div class="row">
        <div class="group count-1">
            <img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
        </div>
        <div class="group count-4">
            <img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
            <img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
            <img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
            <img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
        </div>
        <div class="group count-4">
            <img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
            <img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
            <img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
            <img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
        </div>
    </div>
    <div class="row">
        <div class="group count-4">
            <img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
            <img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
            <img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
            <img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
        </div>
        <div class="group count-1">
            <img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
        </div>
        <div class="group count-4">
            <img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
            <img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
            <img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
            <img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
        </div>
    </div>
    <div class="row">
        <div class="group count-4">
            <img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
            <img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
            <img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
            <img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
        </div>
        <div class="group count-4">
            <img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
            <img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
            <img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
            <img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
        </div>
        <div class="group count-1">
            <img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
        </div>
    </div>
</div>

【讨论】：

是的，这是正确的，但你可以循环编写这段代码吗？
我可以，是的，但是你的乐趣在哪里呢？ :) 你用什么语言？
我试过了，但我无法用循环实现它:(。我在 Nuxt.js 中使用 JS 和 jQuery。
您需要在某些点计算何时开始/关闭一组图像的新 .row，何时开始/关闭一组图像等。例如，您的第一张图像需要启动一个 .row 来环绕接下来的 9 个图像，直到您需要关闭该行。在第 10 个图像处，您需要开始一个新行并在第 18 个图像处再次关闭它。在第 19 个图像处打开另一个，直到最终在第 27 个图像处关闭。在这些行中是不同的图像分组。第一个是 1,4,4。其次是4,1,4。第三是4,4,1。您可以在 for 循环中使用 index 来确定您在哪里以及何时添加 HTML 内容。