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

【问题标题】：Why my image hyperlink clickable from a large margin away from the actual image?为什么我的图像超链接可以从远离实际图像的大边缘点击？
【发布时间】：2018-01-07 14:43:42
【问题描述】：

图片周围的方框是图片的实际尺寸。图片可以从两边的两端一路点击。这在我们的网站上发生了不止一次，所以这是一种趋势，我只是不知道是什么。我只希望图片本身可以点击

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

【问题讨论】：

我建议您在某些图像编辑器（甚至在线）中剪辑您的图像，因为可以通过 CSS 进行剪辑，但我认为这没有意义。您必须指定剪切的坐标才能通过 CSS 完成此操作，我已经看到很多在线编辑器，您可以在其中使用坐标剪切图片，并且您将摆脱 hacky 代码。

标签： html css image hyperlink border

【解决方案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*/
}

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

最后，将点击事件绑定到roundImageWrapper而不是图片上。

【讨论】：