我的“a”标签没有拉伸到我的“img”

Question

我正在为一个项目重建Kurzgesagt主页，我想让我的a标签延伸到img的整个高度。 a标记将img包装在HTML中。

这是我的代码：

HTML

<a href="http://kurzgesagt.org/work/bitdefender/">
  <img src="images/happyDevices.png">
</a>

CSS

a {
  height: auto;
}

img {
  width: 24.8%;
  height: 24.8%;
  margin: 0;
  display: inline-block;
}

Answer 1

您可以尝试将锚标记设置为图像的宽度，并设置内联块的显示，如下所示：

a {
    width: 24.8%;
    display: inline-block;
}

img {
    margin: 0;
    width: 100%;
    display: block;
}

提供了一个工作小提琴 https://jsfiddle.net/h2qkfc4e/

Answer 2

将display: block;分配给图片：

a {
  height: auto;
}

img {
  width: 24.8%;
  height: 24.8%;
  margin: 0;
  display: block;
}

<a href="http://kurzgesagt.org/work/bitdefender/">
  <img src="images/happyDevices.png">
</a>

Answer 3

您还可以使用max-width = 100％，max-height = 100％