我的“a”标签没有延伸到我的“img”的整个高度

Question

我正在重建Kurzgesagt主页的一个项目，我想让我的a标签伸展到我的img的整个高度。该a标签封装在HTML中img。

这里是我的代码：

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

还可以使用最大宽度= 100％，最大高度= 100 ％