html - 在图像上创建超链接，只关注链接的轮廓

Question

我正在像这样在 img 上创建链接 anchor

<a href="xxx.html"><img src="image.jpg" width="100px" height="100px"/></a>

在图像上切换，轮廓仅显示链接周围的边框(这是行高)而不是整个图像。尝试了 css outline-offset，但它会拉伸(stretch)轮廓的宽度。

有什么方法可以在完整图像上设置轮廓吗？

Answer 1

设置 anchor 标签为display:inline-block

a{display:inline-block}

a {
  display: inline-block;
}
a:focus {
  border: 1px solid red;
}

<a href="#">
  <img src="http://placeimg.com/640/480/any" width="100px" height="100px" />
</a>