HTML / CSS大小链接到图像

Question

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

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

它显示的很好，但是链接的可点击区域大于图像（ 50px圆圈）。 我只希望图像的区域是可单击的。 我尝试使用以下CSS执行此操作，但无济于事：

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

更改宽度和最大宽度似乎无效。 最好的方法是什么？

我正在尝试为此站点底部的圆形接触按钮执行此操作 。

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%;
}