【问题标题】: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*/
}

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

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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2019-04-16
    • 1970-01-01
    • 2023-04-05
    • 2014-12-12
    • 2021-04-11
    • 2023-03-12
    • 2019-06-02
    • 2018-04-04
    相关资源
    最近更新 更多