为什么我的图像超链接可以远离实际图像大幅度点击？ [英] Why my image hyperlink clickable from a large margin away from the actual image?

问题描述

图片周围的框是图片的实际大小。图片可以从两侧的端点一路点击。这在我们的网站上不止一次发生，所以这是一个趋势，我只是无法弄清楚什么。我只想让图片本身可以点击

 < hr noshade> 
< a href =website.html> 
< center> < img src =torqafflogo.pngalt =homepagealign = center height =215width =215border =0> < /中心]，[ 
< / a> 
 
  

解决方案

除非您获得原始图片剪辑这样的工具），这是你可以做的 -

1.将这些图像放入容器中。例如 -

 < span class =roundImageWrapper>< img src =torqafflogo.pngalt =homepage />< / span> 
  

2.在周围的包装元素中应用样式

  .roundImageWrapper {
 position：relative; 
 height：100px; 
 width：100px; 
 border-radius：50％; / *使它变圆* / 
 -moz-border-radius：50％; 
 overflow：hidden; / *剪辑圈外的任何内容* / 
} 
  

3. < c $ c> .roundImageWrapper 根据需要使用 top 和 left 的适当值 -

  .roundImageWrapper img {
 position：absolute; 
 top：0; / *根据需要调整* / 
 left：0; / *根据需要调整* / 
} 
  

如果所有这些都说图像具有相似的尺寸。否则，您必须设置单个图像的样式来调整位置。

4. 最后，绑定 roundImageWrapper 而不是图像上。

The box around the picture is the actual size of the picture. The picture is clickable from all the way on the ends of both sides. This occurs more than once on our site, so it is a trend of something, I just cant figure out what. I want just the picture itself to be clickable

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

解决方案

Unless you get the original images clipped (through Photoshop or such tool), here's what you can do -

1.Put these images in a container. Eg -

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

2.Apply style to the surrounding wrapper element

.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 image inside .roundImageWrapper using appropriate values for top and left as per need -

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

This will be easy if all these said images have similar dimensions. Otherwise, you'll have to style the individual images to adjust position.

4. Lastly, bind the click event on the roundImageWrapper instead of on the image.

这篇关于为什么我的图像超链接可以远离实际图像大幅度点击？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！