画像にリンクを貼ると、スマホ画像が崩れる

Question

前提・実現したいこと

皆様ご教示お願い致します。

トップページのスライダー画像の中の一枚にリンクを貼り、スマホでも崩れず見れるようにする。

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

<section class="top_slide"> <ul class="slider"> <li><a href=“X” target=“_blank”><img src="img/top_img1.jpg"></a></li> <li><img src="img/top_img2.jpg"></li> <li><img src="img/top_img3.jpg"></li> <li><img src="img/top_img4.jpg"></li> <li><img src="img/top_img5.jpg"></li> <li><img src="img/top_img6.jpg"></li> </ul> </section>

@media screen and (max-width: 764px) {

.top_slide li {
	height: 400px;
}
.slider img {
	height: 100%;
	object-fit: contain;
}

このように、リンクを入れる前だと、スマホも崩れずに見れますが、リンクを入れたあとCSSが何らかの理由で効かず元の画像サイズになってしまう。
エラーメッセージ

### 該当のソースコード

```ここに言語名を入力
ソースコード

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

まず、<a>タグはデフォルトではインライン要素なので、画像にリンクを張りたい場合は

li a {
  display: inline-block;
}

を指定してあげればいいと思います。
あと細かいサイズ指定とかしたいなら追加してあげてください。

Comments

[AKIKOHARA]

ありがとうございました！！
とても助かりました！