为什么当我添加 < a > 标签时图像大小会重置

Question

我有一个简单的图像，其中使用 CSS 添加了尺寸属性。我决定通过添加标签来使图像可点击，<a>希望不会发生任何变化。但整个图像已重置，我无法在不删除的情况下更改大小<a>标签的情况下更改大小。

超文本标记语言

<a href="#"><header><img src="images/logo.png" alt=""></header></a>

CSS

header img {
    width: 100%;
    height: 50%;
}

此外，另一个 React 项目也存在同样的问题：

<a href="#"><header><img src="images/logo.png" alt=""></header></a>

编辑：

将a标签放在外面可以ImageListItem使其正常工作。

header img {
    width: 100%;
    height: 50%;
}

Answer 1

您的img宽度被设置为其父级的 100% 宽度和其父级的 50% 宽度。如果您添加标签a，并且a元素的宽度和高度不是您所期望的，您可能会看到行为发生变化。但开箱即用，在不应用其他样式的情况下，它不应该改变任何东西。

例如，这个普通代码显示有或没有a元素的 img 大小没有区别。

header img {
  width: 100%;
  height: 50%;
}

<header><img src="https://placekitten.com/150/150" alt=""></header>

<a href="#">
  <header><img src="https://placekitten.com/150/150" alt=""></header>
</a>