html - 图像边界外的链接函数

Question

因此，如果我向图像添加链接，链接区域会占据页面的整个宽度，这超出了图像的大小。这是我的整个 CSS 代码:

img {
display: block;
height: auto;
margin: 0 auto;
max-width: 100%;
}

但是，我推断这是由于这一行造成的:

display: block;

我希望我的图像居中并且适合移动设备，所以我认为我无法更改此编码，但是我可以对 a 元素做些什么来防止链接区域延伸到我的图像之外？

这是一个测试页:Link

Answer 1

您可以更改此编码，同时保持移动友好性。

一种方法是创建一个叠加层 <div>以文本为中心。然后设置 max-width图片的 100% .大功告成。

.text-center {
  text-align: center;
}
img {
  max-width: 100%;
}

<div class="text-center">
  <a href="http://www.gloryhood.com/images/free-will-1.png">
    <img src="http://www.gloryhood.com/images/free-will-1.png" />
  </a>
</div>