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

Question

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

有没有办法在不破坏网格的情况下将 href link 添加到此代码的剩余图像中？

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

其中一个问题是在前两张图片周围添加 a 标签时，类定位内容不正确。网格是定位锚标签，现在不是imgs。

我发现遵循不同的类有点困难，在此代码段中使用了 CSS nth-child 选择器。

对于较宽的视口，网格定义为 4 列宽 2 行深，对于较窄的视口，网格定义为 2 列宽 4 行深。

其他一些观察结果：

使用封面意味着部分图像在某些纵横比下被截断。这对你的情况很重要，因为有文字。此代码段使用 contain 来确保字符不会被截断。

我假设（但不知道所以当然你可能想把它去掉）你希望所有 4 个图像显示在视口中，无论纵横比如何。此代码段选择网格项目的大小，使它们成为正方形，但通过使用 CSS min 函数确保没有任何东西超出视口底部。

* {
  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>

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

How do I add href to individual images on image-grid?

css

image

href

css-grid