为什么向我的图像添加属性链接会移动我的图像？

Question

我正在尝试插入两个垂直堆叠的图像（flex-column），如果两个图像不在属性标签内，我可以这样做。但是，当我将它们放入标签中时，图片会稍微向右偏移，如移动视图中的图片所示。

在这里，顶部的图像会将您带到点击链接，但底部的图像不会。我使用的 HTML 具有这种形式。

    
                <div className={isWideScreen ? "horizontal-flex basic-container" : "vertical-flex basic-container"}>
                    <a href="https://www.website1.com/"><img className="set-pic-size" src={pic1}/></a>
                    <img className="set-pic-size" src={pic2}/>
                </div>

相关的 css 在这里用于移动视图。

.basic-container {
    justify-content: center;
}

.set-pic-size {
    width: 100%;
    height: auto;
    margin: 10px;
    align-self: center;
}

Answer 1

这个问题解决了吗？我记得有一个使用 CSS 样式的解决方案，但我不记得该属性到底是什么。我以前在担任电子邮件 HTML 开发人员时曾遇到过这个问题，但已经过去很多年了。

Answer 2

不要将图像放置在锚元素内；相反，尝试将

href

添加到图像本身。锚元素是带有下划线且看起来像链接的文本；

href=""

可用于设置任何元素点击时的重定向链接。

删除

A

元素并将

href

属性复制/粘贴到图像。