我的「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 ％