html - 为什么我的图像超链接可以从远离实际图像的较大边缘点击？

Question

图片周围的方框是图片的实际大小。图片可以从两侧的末端一直点击。这种情况在我们的网站上不止一次发生，所以这是一种趋势，我只是想不通是什么。我只希望图片本身可以点击

<hr noshade>
<a href="website.html">
<center> <img src="torqafflogo.png" alt="homepage" align=center height="215" width="215" border="0"> </center>
</a>
<hr noshade>

Answer 1

除非您对原始图像进行了裁剪(通过 Photoshop 或此类工具)，否则您可以执行以下操作 -

1.将这些图片放在一个容器中。例如-

<span class="roundImageWrapper"><img src="torqafflogo.png"  alt="homepage" /></span>

2.将样式应用于周围的包装元素

.roundImageWrapper{
   position : relative;
   height : 100px;
   width : 100px;
   border-radius : 50%; /*Make it round*/
   -moz-border-radius : 50%;
   overflow : hidden; /*clip anything outside the circle*/
}

3.根据需要使用适当的 top 和 left 值在 .roundImageWrapper 中定位图像 -

.roundImageWrapper img{
   position : absolute;
   top : 0; /* Adjust as per need*/
   left : 0; /* Adjust as per need*/
}

如果所有这些图片都具有相似的尺寸，这将很容易。否则，您必须为各个图像设置样式以调整位置。

1. 最后，将点击事件绑定(bind)到 roundImageWrapper 而不是图像上。