画像を画面サイズに合わせて縮小させたい

Question

初心者です。おかしな部分が多々あるかと思いますが、よろしくお願いします。
dreamweaverを使用して作業を行なっているのですが、自分で調べても解決しない問題に直面したので質問させてください。

以下の　flow__top__img　という画像を画面のサイズに合わせて縮小させたいのですが、うまくいきません。
他の画像では成功しているので、このあたりのどこかに原因があると考えています。

HTML

<div class="flow">
	<div id="link2"></div>
	<div class="flow__top">
	    <div class="flow__top__img">
		    <img src="images/back__under1.png" alt="タイトル背景"/>
		    <div class="flow__top__txt">フロー</div>
	    </div>
	</div>
</div>

CSS

.main{
max-width: 100%;
height: auto;
margin: 0 auto 0 auto;
font-family: 'Noto Sans JP', sans-serif;
}

.main__inner{
width: auto;
margin: 0px auto;
}

該当箇所

.flow{
width: auto;
margin: 0 auto 60px auto;
text-align: center;
}

.flow__top{
max-width: 100%;
height: auto;
text-align: center;
}

.flow__top__img{
max-width: 100%;
height: auto;
text-align: center;
position: relative;
filter: drop-shadow(0px 10px 10px rgba(0,0,0,0.3));
}

.flow__top__txt{
position: absolute;
top:37%;
left:50%;
transform: translate(-50%,-50%);
font-size: clamp(14px, 4vw, 32px);
color: #FFFFFF;
padding:0;
margin:0;
font-weight:bolder;
}
font-size: clamp(14px, 4vw, 32px);
color: #FFFFFF;
padding:0;
margin:0;
font-weight:bolder;
}

---

情報が不足している場合など、ご指摘いただけますと幸いです。
よろしくお願いします。

Answer 1

まずセレクタ.flow__top__imgでは<img>要素に高さを与えることになりませんので、.flow__top__img imgとでもすると良いでしょう。

そして、たとえば画面の幅に合わせたいならwidth: 100vw;とでもすると良いと思います。

Comments

[sp1]

ご回答ありがとうございます。
データが手元にないので月曜に試してみようと思います。

[sp1]

できました！ありがとうございます。