单击图库中的图像时如何打开链接？ [关闭]答案

【问题标题】：How do I make a link open when I click on an image in the gallery? [closed]单击图库中的图像时如何打开链接？ [关闭]
【发布时间】：2022-11-17 23:06:05
【问题描述】：

单击下面图库中的图像时如何打开链接？这是codepen上的代码： https://codepen.io/xss1de/pen/JjZrxrB

.container {
  display: flex;
  width: 100%;
  padding: 4% 2%;
  box-sizing: border-box;
  height: 100vh;
  background: #161616;
}

.box {
  flex: 1;
  overflow: hidden;
  transition: .5s;
  margin: 0 2%;
  box-shadow: 0 20px 30px rgba(0, 0, 0, .1);
  line-height: 0;
  border-radius: 10px;
}

.box>img {
  width: 200%;
  height: calc(100% - 10vh);
  object-fit: cover;
  transition: .5s;
}

.box>span {
  background: #111111;
  font-size: 3.8vh;
  display: block;
  text-align: center;
  height: 10vh;
  line-height: 2.6;
  font: 'Roboto', sans-serif;
  color: #fff;
}

.box:hover {
  flex: 1 1 50%;
}

.box:hover>img {
  width: 100%;
  height: 100%;
}

<div class="container">
  <div class="box">
    <img src="https://source.unsplash.com/1000x800">
    <span>CSS</span>
  </div>
  <div class="box">
    <img src="https://source.unsplash.com/1000x802">
    <span>Image</span>
  </div>
  <div class="box">
    <img src="https://source.unsplash.com/1000x804">
    <span>Hover</span>
  </div>
  <div class="box">
    <img src="https://source.unsplash.com/1000x806">
    <span>Effect</span>
  </div>
</div>

【问题讨论】：

如果您不熟悉 HTML 中的“链接”是什么，那么您真的应该从 HTML 的一些介绍性教程开始。我们鼓励您进行一些研究并进行尝试。要了解有关此社区的更多信息以及我们如何为您提供帮助，请从tour 开始并阅读How to Ask 及其链接资源。

标签： html css

【解决方案1】：

用<a> 标签包裹你的内容。此外，您需要稍微更改 CSS。

请参见下面的 sn-p。

.container {
  display: flex;
  width: 100%;
  padding: 4% 2%;
  box-sizing: border-box;
  height: 100vh;
  background: #161616;
}

.box {
  flex: 1;
  overflow: hidden;
  transition: .5s;
  margin: 0 2%;
  box-shadow: 0 20px 30px rgba(0, 0, 0, .1);
  line-height: 0;
  border-radius: 10px;
}

.box img {
  width: 200%;
  height: calc(100% - 10vh);
  object-fit: cover;
  transition: .5s;
}

.box span {
  background: #111111;
  font-size: 3.8vh;
  display: block;
  text-align: center;
  height: 10vh;
  line-height: 2.6;
  font: 'Roboto', sans-serif;
  color: #fff;
}

.box:hover {
  flex: 1 1 50%;
}

.box:hover img {
  width: 100%;
  height: 100%;
}

a {
  text-decoration: none;
}

<div class="container">
  <div class="box">
    <a href="https://www.google.com/">
      <img src="https://source.unsplash.com/1000x800">
      <span>CSS</span>
    </a>
  </div>
  <div class="box">
    <a href="https://www.google.com/">
      <img src="https://source.unsplash.com/1000x802">
      <span>Image</span>
    </a>
  </div>
  <div class="box">
    <a href="https://www.google.com/">
      <img src="https://source.unsplash.com/1000x804">
      <span>Hover</span>
    </a>
  </div>
  <div class="box">
    <a href="https://www.google.com/">
      <img src="https://source.unsplash.com/1000x806">
      <span>Effect</span>
    </a>
  </div>
</div>

【讨论】：

【解决方案2】：

要打开点击事件的链接，您应该使用以下内容：

window.open(url, target);

其中目标：'_self' | '_空白的'... _self：在同一个标签页中打开 _空白：在新窗口中打开

【讨论】：

问题的标签是html 和css。所以这可能意味着没有 JavaScript，而是 OP 不知道如何使用 a 标签。
罗杰，我应该更多地关注标签谢谢！