liタグ全体をリンクにしたい場合の対処方法

Webページおいて、liタグ内にaタグがあり、aタグ内にimgタグというマークアップがしてあります。
imgタグで指定した画像をクリックすると、遷移するようになっています。

<ul>
    <li><a href="page1.html"><img src="page1.png"></a></li>
    <li><a href="page2.html"><img src="page2.png"></a></li>
</ul>

liタグの高さと幅が、画像と一致していれば、liタグだけをクリックできず、画像をクリックして遷移するので違和感はありません。
liタグの高さと幅が、画像より大きかった場合、画像の周りに、liタグの領域ができます。
画像をクリックすると遷移しますが、liタグの領域をクリックすると遷移しません。

Photo by Lee Campbell on Unsplash

aタグの領域を、liタグの領域に合わせる

liタグの領域をクリックしても、画像をクリックした場合と同様に、遷移させたかったので、どのようにすれば対処できるのか検索しました。
検索した結果、

li a{
    display: block;
    height: 100%;
    width: 100%
}

とすればできそうとわかったので、適用するとできました。

aタグは、インライン要素のため、ブロック要素にする指定をして、親要素の高さと幅を引き継ぐために、どちらも100%の指定をしています。
難しい方法ではなく、CSSだけで対処できました。