Question

我对html和CSS很陌生，目前我正在做一个业余网站项目。在我的投资组合页面上，我有一些图像也可以用作链接，但是链接的可点击区域大于图像本身。我在这里通过了关于stackoverflow的不同答案，这虽然有所帮助，但是问题尚未解决。

如果有人可以看一下我的代码并引导我朝正确的方向前进，我将不胜感激。

/*PORTFOLIO*/

.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0px 0px;
}

.column {
  flex: 100%;
  max-width: 100%;
}

.column img {
  /*display: inline-block;
    height: 300px;
    width: 400px;
    margin: 50px 50px;
    object-fit: cover;
    border-radius: 10%; */
  vertical-align: middle;
}

.container {
  position: relative;
  /*width: 400px;*/
  width: 100%;
}

.image {
  display: block;
  height: 300px;
  width: 400px;
  margin: 50px 50px;
  object-fit: cover;
  border-radius: 10%;
}

.overlay {
  display: inline-block;
  position: absolute;
  top: 0px;
  bottom: 0;
  left: 50px;
  right: 0;
  height: 300px;
  width: 400px;
  opacity: 0;
  transition: 0.5s ease;
  background-color: black;
  border-radius: 10%;
}

.container:hover .overlay {
  opacity: 0.8;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.column a {
  display: inline-block !important;
}

<header>
  <nav>
    <li><a href="index.html">Home</a></li>
    <li><a href="portfolio.html">Portfolio</a></li>
    <li><a href="contact.html">Contact</a></li>
  </nav>

  <div class="row">
    <div class="column">
      <a href="">
        <div class="container">
          <img src="https://via.placeholder.com/500" class="image">
          <div class="overlay">
            <div class="text">Sound Insulation between Lille and Store Vega</div>
          </div>
        </div>
      </a>
      <a href="">
        <div class="container">
          <img src="https://via.placeholder.com/500" class="image">
          <div class="overlay">
            <div class="text">Sonic Crystals at Roskilde Festival</div>
          </div>
        </div>
      </a>
    </div>
    <div class="column">
      <a href="">
        <div class="container">
          <img src="https://via.placeholder.com/500" class="image">
          <div class="overlay">
            <div class="text">Programming</div>
          </div>
        </div>
      </a>
      <a href="">
        <div class="container">
          <img src="https://via.placeholder.com/500" class="image">
          <div class="overlay">
            <div class="text">Psychoacoustics</div>
          </div>
        </div>
      </a>
    </div>
  </div>


</header>

Answer 1

您的图像具有margin，因此margin创建的所有空间也是可点击的，因为它们位于您的a标记内

Answer 2

我知道您的问题已经得到解决，问题已经解决，但是我建议您下次使用 vw 和 vh 而不是 px 和％，因为它可以帮助您使网页/网站具有响应性。

在谈论可点击区域时，我想您会喜欢使用图片映射。我要附加图像和代码，将其复制并查看其工作方式。我确定你会喜欢的。

<!DOCTYPE html>
<html>
<head>
      <title>Image Map</title>
</head>
<body>
<img src="Images/Image Map.jpg" alt="Image Map" usemap="#imagemap" width="400" height="379">
<map name="imagemap">
    <area shape="rect" coords="34,44,270,350" alt="Computer" href="https://en.wikipedia.org/wiki/Computer">
    <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="https://en.wikipedia.org/wiki/Coffee">
    <area shape="rect" coords="290,172,333,250" alt="IPhone" href="https://en.wikipedia.org/wiki/IPhone">
</map>
</body>
</html>

CSS / html-可点击区域大于图片

2 个答案: