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

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. .roundImageWrapper内的位置图片根据需要使用top和left的适当值 -

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

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

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