リンク付き画像でpositionプロパティを付与するとflexboxが崩れてしまう

Question

前提・実現したいこと

flexboxを使ってリンク付き画像を作成しています。
完成イメージは以下の通りです。

発生している問題・エラーメッセージ

画像をこのように配置することはできたのですが、aタグであるリンクを画像全体に被せたくposition:absoluteするとせっかくのflexboxが崩れてしまいました。

どなたかご教授いただければ幸いです。

<ul class="card">
	<li><a href="#"><img src="image/hoge.png" alt=""></a></li>
</ul>

<ul class="card">
	<li><a href="#"><img src="image/hoge.png" alt="hoge"></a></li>
	<li><a href="#"><img src="image/hoge.png" alt="hoge"></a></li>
	<li><a href="#"><img src="image/hoge.png" alt="hoge"></a></li>
	<li><a href="#"><img src="image/hoge.png" alt="hoge"></a></li>
</ul>

<ul class="card">
	<li><a href="#"><img src="image/hoge.png" alt="hoge"></a></li>
</ul>

.card{
	display: flex;
	flex-wrap: wrap;
	width: 40rem;
	justify-content: center;
	align-items: center;
	margin:0 auto;
}
.card li{
	padding:2rem;
}
.card li img{
	width: 13rem;
	height: 13rem;
	/*position: relative;  レイアウトが崩れてしまう*/
}
.card a{
	width: 13rem;
	height: 13rem;
/*  
    position: absolute;
	z-index: 10;
*/
}

Comments

[Lhankor_Mhy]

relative と absolute が逆になっていませんか？
実際のコードもこのようになっているのですか？

[itzuakniami123]

この通りです。
relative と absolute を逆にしても同じようにレイアウトが崩れてしまいました…

[Lhankor_Mhy]

リンクを画像にかぶせればそれでいいのですか？

それとも、positionプロパティを使うことが目的なのですか？

[itzuakniami123]

リンクを画像サイズにぴったり被せるのが目的です。

Answer 1

a要素に width height を指定してますが、a要素はインライン要素なので無効です。
display: block; でブロックレベル要素にすれば、width heigh が効いて設定したサイズになります。
position:absolute は不要です。

.card li img{
    width: 13rem;
    height: 13rem;
}
.card a{
    display: block;
    width: 13rem;
    height: 13rem;
}

Comments

[itzuakniami123]

ありがとうございます。
理由もあってわかりやすかったのでBAとさせていただきます。

Answer 2

画像をインラインからブロックにしてしまうのが、一番手っ取り早いと思います。

img{
  display: block;
}

Comments

[itzuakniami123]

ありがとうございます！解決しました。