Question

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

pt['SPY']

但是，由于这一行，我推断出这种情况发生了：

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

我希望我的图像能够居中且适合移动设备，所以我认为我不能改变这种编码，但我能做些什么来阻止链接区域扩展到我的图像之外？

以下是测试页：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>

Answer 2

使用此代码（see example），您的图片居中且适合移动设备：

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

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

图像边界外的链接函数

2 个答案: