锚标记可点击区域大于图像内部

Question

看到这个问题被问了很多次，但似乎解决方案对一些人有效，而不是其他人:

代码如下:

.headbuttons {
  opacity: .7; 
  background-color: grey; 
  background-blend-mode: overlay; 
  display: block;
}

<a class="headbuttons" id="homebutton" href="C:UsersDom NguyenDocumentswebsite.html"> 
<img src="C:UsersDom NguyenDocumentshome_button.png" width="125" height="62.5"> </a>

尝试了建议的inline-block和block来显示，但都不起作用，可点击的区域仍然比图像本身大得多。

Answer 1

只需将css更改为以下内容，其中包括宽度和高度:

.headbuttons {
  opacity: .7; 
  background-color: grey; 
  background-blend-mode: overlay; 
  display: block;
  width: 125px;
  height: 62.5px;
}

<a class="headbuttons" id="homebutton" href="C:UsersDom NguyenDocumentswebsite.html"> 
<img src="C:UsersDom NguyenDocumentshome_button.png" width="125" height="62.5"> </a>

Answer 2

我认为你可以设置宽度和高度，看起来像: <a width="125" height="62.5">

Answer 3

Luka Kerr提供的解决方案肯定适用于这个特定的用例。然而，作为一个通用的解决方案，你可以只添加css属性display: block;到你的<img>标签和<a>周围它会自动缩放到你的img的大小(即使它的大小变化)。

.headbuttons {
  opacity: .7;
  background-color: grey;
  background-blend-mode: overlay;
  display: block;
}
.headbuttons img {
  display: block;
}

<a class="headbuttons" id="homebutton" href="C:UsersDom NguyenDocumentswebsite.html">
  <img src="C:UsersDom NguyenDocumentshome_button.png">
</a>