图片超链接尺寸错误答案

【问题标题】：Image hyperlink dimensions wrong图片超链接尺寸错误
【发布时间】：2020-05-31 03:51:18
【问题描述】：

我正在尝试向图像添加超链接，它工作正常，但是当我将鼠标悬停在 Chrome 开发工具中的 <A>...</A> 节点上时，它显示错误的尺寸。

Dev Tools 显示尺寸为 512x18，并且还显示盒子模型在图像下方微移了大约 5 个像素左右。

我不明白为什么会发生这种情况或这里发生了什么。如果我有一个 512x512 像素的图像，我希望超链接尺寸为 512x512 像素。

&lt;A HREF="https://via.placeholder.com/512"&gt;&lt;IMG ALT="Text" SRC="https://via.placeholder.com/512"/&gt;&lt;/A&gt;

我尝试将WIDTH 和HEIGHT 属性添加到图像，但没有奏效。似乎让它工作的唯一方法是将定义的 CSS 大小添加到周围的 <A>...</A> 超链接元素。

STYLE="display: inline-block; width: 512px; height: 512px"

有没有其他方法可以做到这一点而不必对图像的尺寸进行硬编码？

【问题讨论】：

【解决方案1】：

将 img 标记设置为块并将锚标记设置为 inline-block 也使高度均为 512 像素

【讨论】：

【解决方案2】：

添加“显示：inline-flex;”在锚标签上，您将获得与锚标签相同的图像尺寸。我已在 sn-p 下面内联添加它，但您可以将此属性移动到您的 CSS 文件中：

<A HREF="https://via.placeholder.com/512" style="display:inline-flex;"><IMG ALT="Text" SRC="https://via.placeholder.com/512"/></A>

【讨论】：