带有超链接的图像 - 可点击区域超出图像答案

【问题标题】：Image with hyperlink - clickable area exceeds image带有超链接的图像 - 可点击区域超出图像
【发布时间】：2019-04-16 04:44:33
【问题描述】：

我的 WordPress 网站上的画廊存在问题：画廊中的每张图片都有一个超出图片的可点击区域。例如，如果我有一个只有一张图片的图库，则超链接会在整个内容长度内扩展图片的左右两侧。我只想要图像本身的超链接，我不希望在单击图像左侧或右侧的任何位置时打开图像。（示例库：https://blog.ovidiuav.com/2018/11/09/nou-autor-blog/）

任何帮助将不胜感激。

谢谢！

【问题讨论】：

首先，请阅读How to Ask和meta.stackoverflow.com/q/254428/10283047。
display: inline-block 用于 a 周围的 img 元素已经解决了大部分问题。如果下方剩余的“链接”空间也是一个问题，那么您需要从图像中删除 margin-bottom，并将其放在其他位置（如链接或容器元素上）。
谢谢@misorude，这很有效，我用解决方案更新了问题。我不知道这个规则，但我理解它，谢谢你指出它。但是，在这种情况下，我没有要发布的任何实际代码。但是，我确实为任何可能感兴趣的人发布了解决问题中问题的代码。再次感谢！附：您能否再次发布作为答案，以便我将其标记为解决方案？

标签： css wordpress hyperlink gallery

【解决方案1】：

将以下内容添加到您的 css 文件中，

.gallery-icon{
width: fit-content;
margin: auto;
}

【讨论】：

谢谢你，但是没有用。同时我得到了答案，我已经用解决方案更新了问题。

【解决方案2】：

如果没有任何代码，很难判断实际问题出在哪里，也许使用包装图像的锚元素？并将图像调整到您需要的大小。

<a href="www.twitter.com" target="_blank">
  <img class="image" src="https://helpx.adobe.com/uk/stock/how-to/visual-reverse-image-search/_jcr_content/main-pars/image.img.jpg/visual-reverse-image-search-v2_1000x560.jpg" title="Butterfly">
</a>

【讨论】：

谢谢，但同时我得到了答案，我已经用解决方案更新了问题。

【解决方案3】：

这个 CSS 修复了它：

.gallery .gallery-icon img {
display: inline-block;
}

（来自对问题的评论中的误会的建议）

【讨论】：