如何将href添加到图像网格上的单个图像中？

Question

我是新手编码，所以感谢您的任何帮助。我有一个带有列的响应图像网格。我已将其设置为在小于768的媒体屏幕上转换为2列。我成功地将href链接添加到较小的图像中。当我将href链接添加到其余两个图像时，图像大小会破坏网格。

有没有一种方法可以在不破坏网格的情况下将href链接添加到此代码中的其余图像？

​

body {
  margin: 0;
}

.image-grid {
  --gap: 10px;
  --num-cols: 4;
  --row-height: 200px;
  box-sizing: border-box;
  padding: var(--gap);
  display: grid;
  grid-template-columns: repeat(var(--num-cols), 1fr);
  grid-auto-rows: var(--row-height);
  gap: var(--gap);
}

.image-grid>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-grid-col-2 {
  grid-column: span 2;
}

.image-grid-row-2 {
  grid-row: span 2;
}

.image-grid-col-3 {
  grid-column: span 2;
}

.image-grid-row-3 {
  grid-row: span 1;
}

.straighthair-container {
  grid-row: span 1;
  grid-column: span 2;
}

.image-grid .image-grid-col-2 .image-grid-row-2 {
  --gap: 10px;
  --num-cols: 4;
  --row-height: 200px;
  box-sizing: border-box;
  padding: var(--gap);
  display: grid;
  grid-template-columns: repeat(var(--num-cols), 1fr);
  grid-auto-rows: var(--row-height);
  gap: var(--gap);
}


/* Small devices (phones, 768px and down) */

@media only screen and (max-width: 768px) {
  .image-grid {
    --num-cols: 2;
    --row-height: 200px;
  }
  .image-grid-col-3 {
    grid-row: span 1;
    grid-column: span 1;
  }
  .image-grid-row-3 {
    grid-row: span 1;
    grid-column: span 1;
  }
  .image-grid-col-2 {
    grid-row: span 1;
    grid-column: span 1;
  }
  .image-grid-row-2 {
    grid-row: span 1;
    grid-column: span 1;
  }
}

<div class="image-grid">
  <img class="image-grid-col-2 image-grid-row-2" src="https://cdn.shopify.com/s/files/1/0457/9386/9985/files/raw-indian-bundles3.jpg?v=1645152903" alt="architecture">

  <img class="image-grid-col-3 image-grid-row-3" src="https://cdn.shopify.com/s/files/1/0457/9386/9985/files/straight_wigs_menu_item.jpg?v=1646624010" alt="">

  <a href="https://donnaparks.com/products/raw-indian-5x5-hd-lace-custom-wig-12-inches?variant=41566470701217" target="_self">
    <img src="https://cdn.shopify.com/s/files/1/0457/9386/9985/files/blondebodywave-bundles.jpg?v=1645155520" alt="" style="width:100%;height:100%;object-fit:cover;">
  </a>

  <a href="https://donnaparks.com/products/raw-indian-5x5-hd-lace-custom-wig-12-inches?variant=41566470701217" target="_self">
    <img src="https://cdn.shopify.com/s/files/1/0457/9386/9985/files/blondebodywave-bundles.jpg?v=1645155520" alt="" style="width:100%;height:100%;object-fit:cover;">
  </a>
</div>

​

Answer 1

其中一个问题是，在前两个图像周围添加一个标记时，放置位置的类是不正确的。网格正在定位锚标记，而不是现在的imgs。

我发现要跟踪不同的类有点困难，在这个片段中，我使用了CSS第n个子选择器。

网格定义为4列宽，2行深用于更宽的视点，2列宽，4行深为narower视图。

其他几点意见：

使用盖子意味着部分图像以一定的高宽比被切断。这在你的情况下很重要，因为有文本。这个片段使用cut来确保字符不会被切断。

我假设(但不知道)，当然，您可能想要去掉这个)，您希望在视口显示所有4幅图像，不管高宽比如何。这段代码段选择网格项的大小以使它们成为方形，但通过使用CSS函数确保没有任何东西从视口底部运行。

​

* {
  margin: 0;
  padding: 0;
}

body {
  width: 100vw;
  height: 100vh;
}

.image-grid {
  display: inline-grid;
  grid-template-columns: repeat(4, min(25vw, 50vh));
  grid-template-rows: repeat(2, min(25vw, 50vh));
  background-color: pink;
  gap: 0;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.image-grid * {
  width: 100%;
  height: 100%;
  object-fit: contain;
  position: relative;
}

.image-grid>*:nth-child(1) {
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
}

.image-grid>*:nth-child(2) {
  grid-column: 3 / span 2;
  grid-row: 1 / span 1;
}

.image-grid>*:nth-child(3) {
  grid-column: 3 / span 1;
  grid-row: 2 / span 1;
}

.image-grid>*:nth-child(4) {
  grid-column: 4 / span 1;
  grid-row: 2 / span 1;
}

@media screen and (max-width: 768px) {
  .image-grid {
    grid-template-columns: repeat(2, min(50vw, 25vh));
    grid-template-rows: repeat(4, min(50vw, 25vh));
  }
  .image-grid>*:nth-child(1) {
    grid-column: 1 / span 2;
    grid-row: 1 / span 2;
  }
  .image-grid>*:nth-child(2) {
    grid-column: 1 / span 2;
    grid-row: 3 / span 1;
  }
  .image-grid>*:nth-child(3) {
    grid-column: 2 / span 1;
    grid-row: 4 / span 1;
  }
  .image-grid>*:nth-child(4) {
    grid-column: 1 / span 1;
    grid-row: 4 / span 1;
  }
}

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <div class="image-grid">
    <a> <img src="https://cdn.shopify.com/s/files/1/0457/9386/9985/files/raw-indian-bundles3.jpg?v=1645152903" alt="architecture">
    </a>
    <a>
      <img src="https://cdn.shopify.com/s/files/1/0457/9386/9985/files/straight_wigs_menu_item.jpg?v=1646624010" alt="">
    </a>
    <a href="https://donnaparks.com/products/raw-indian-5x5-hd-lace-custom-wig-12-inches?variant=41566470701217" target="_self">
      <img src="https://cdn.shopify.com/s/files/1/0457/9386/9985/files/blondebodywave-bundles.jpg?v=1645155520" alt="">
    </a>

    <a href="https://donnaparks.com/products/raw-indian-5x5-hd-lace-custom-wig-12-inches?variant=41566470701217" target="_self">
      <img src="https://cdn.shopify.com/s/files/1/0457/9386/9985/files/blondebodywave-bundles.jpg?v=1645155520" alt="">
    </a>
  </div>
</body>

​