在图像上创建超链接，仅聚焦轮廓链接

Question

我在img上创建了一个像这样的链接锚

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

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

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

Answer 1

将锚标记设置为display:inline-block

a{display:inline-block}

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;