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

图片周围的框是图片的实际大小。图片可以从两侧的端点一路点击。这在我们的网站上不止一次发生，所以这是一个趋势，我只是无法弄清楚什么。我想刚才的图片本身可以点击为什么我的图像超链接可以远离实际图像大幅度点击？

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

来源

2017-07-31 Torq

我会建议你在一些图像编辑器（甚至是在线）中剪辑你的图像，因为通过CSS剪裁是可能的，但我没有看到这方面的意义。你必须指定剪辑的坐标来通过CSS来完成这一点，我已经看到很多在线编辑器，你可以使用坐标剪裁图片，并且你会摆脱hacky代码。 –

除非你得到的原始图像剪切（通过Photoshop或这样的工具），这里是你能做什么 -

1.Put这些图像在容器中。例如 -

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

这 -

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

2.适用风格到周围的包装元素使用top和适当的值left按照需要

.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.Position图像内.roundImageWrapper如果所有这些图像具有相似的尺寸将会很容易。否则，您将不得不对样式进行调整以调整位置。

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

来源

2017-07-31 23:55:49 Vandesh

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

回答

相关问题