时间戳

首页 > 解决方案 > 图片超链接尺寸错误

html - 图片超链接尺寸错误

问题描述

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

开发工具显示尺寸为 512x18，它还显示盒子模型在图像下方微移了大约 5 个像素左右。

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

图片超链接尺寸错误

<A HREF="https://via.placeholder.com/512"><IMG ALT="Text" SRC="https://via.placeholder.com/512"/></A>

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

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

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

标签： htmlcssimagehyperlink

解决方案

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

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

推荐阅读