图像边界外的链接函数

Question

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

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

但是，我已经推断这是由于这一行而发生的：

display: block;

我希望我的图像

居中且适合移动设备，所以我认为我不能更改此编码，但是我可以对元素做些什么来防止链接区域扩展到我的图像之外？

这是一个测试页面：链接

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>

Answer 2

使用此代码（请参阅示例），您的图像将居中且适合移动设备：

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

当您的页面变得比这更复杂时，将图像（甚至整个内容块）包装在容器 div-s 中以帮助定位部分会有所帮助。