HTML / CSS大小链接到图像

Question

我正在尝试与这样的图片建立链接

<a href="http://test.com">
    <img src="image.png" />
</a>

它显示正常，但链接的可点击区域大于图像（50px圈）。我想只允许图像区域可点击。我尝试使用以下css执行此操作，但无济于事：

a {
    max-width: 50px;
    border-radius: 50%;
}

更改宽度和最大宽度似乎没有任何效果。最好的方法是什么？

我正在尝试对this site底部的圆形接触按钮执行此操作。

Answer 1

有两件事，您所描述的网站上的图片并未嵌入到锚中。并且您提供的链接缺少www.可能调用无法响应或不存在的页面。

Answer 2

解决方案：

#contact a { display: inline-block; }

a标记占据了父标记的整个width，因为它正在呈现为block，如果你想强制它只渲染它的孩子的内容，你可以使用inline-block。

Answer 3

将图像作为该div形状（圆形）的背景，您可以通过css3半径获得圆形。 这样做的缺点是图像将不再嵌入HTML img。 然后它会工作得很好，我想

Answer 4

您可以为链接指定一个类，例如.social-link，并应用以下代码：

.social-link{
  max-width: 50px;
  display: block;
  margin: 0 auto;
  border-radius: 50%;
}