htmlのaタグの扱い方について

Question

aタグを画像を含めchildクラスすべてにしようとすると画像が大きくなってしまいます。
今書いてあるｃｓｓでaタグをchildクラス全体に与えたいのですが、どうすれば画像を大きくせずaタグを与えることができますか？

<div class="parent"> <div class="child"><a href="index.html"><img src="hoge.png" class="img"><p>あ</p></a> </div> <div class="child"><a href="index.html"><img src="hoge.png" class="img"><p>あ</p></a> </div> <div class="child"><a href="index.html"><img src="hoge.png" class="img"><p>あ</p></a> </div> <div class="child"><a href="index.html"><img src="hoge.png" class="img"><p>あ</p></a> </div> </div>

以下css
.parent {
background: lightblue;
display: flex;
}

.child {
background: lightgreen;
width: 30%;
margin:1%; justify-content:space-between; /* 追加 */
font-size:2vw;
}

.child>img
{
width:100%;
}
.child:hover
{
opacity: 0.6; filter: brightness(110%);
}

@media screen and (max-width: 800px) {
.parent {
flex-wrap: wrap;
}
}

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

.child
{width:90%;
background: lightblue;
display: flex;
border:1px solid #000;
margin:1% auto;
}
.child img
{width:40%;}

Answer 1

imgにwidthを指定するcssを外してください