あまり使い道はないかもですが､文章をボックスの下に置いてみます｡完成は上のものになります｡

HTML

<div class="item">
<h4>タイトル</h4>
<p>ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。</p>
<figure><img src="images/cloud.JPG" alt="画像"></figure>
</div>

itemで全体を囲みます｡その中にタイトルと文章､そして写真｡この中で､文章を下に置きます｡今のところ､縦に並んでいるだけです｡SCSSでカスタマイズします｡

SCSS

.item{
container-type: inline-size;
position: relative;
height: 300px;
border: 2px solid #0067bb;
padding: 10px;

p{
position: absolute;
bottom: 0;
width: calc(100% - 170px);
}
h4{
margin: 0;
padding: 0;
}

figure img{
max-width: clamp(9.375rem, calc(7.955rem + 6.061vw), 12.5rem);
height: 100%;
object-fit: cover;
position: absolute;
right: 0;
top: 0;
}
}

@container (min-width:400px) {

.item{
p{
width: calc(100% - 200px);
}
}

}

itemにcontainer-type: inline-sizeを書き､コンテナクエリを使えるようにします｡position: relativeを書き､起点にします｡あとは高さなどを指定しますが､高さを指定しないと上手くできません｡

ｐに対して､position: absoluteを書き､起点からの位置をbottom: 0にします｡

widthをcalcで計算します｡

figureに幅と高さを書きます｡画像が潰れるので､object-fit: cover;で帳消しにします｡

そのあと､また､position: absoluteを書き､rightとtopで起点からの位置を書きます｡

このままだと､pのwidthに違和感があります｡そこで､コンテナクエリを使います｡具体的には以下のところです｡

@container (min-width:400px) {

.item{
p{
width: calc(100% - 200px);
}
}
}

コンテナの幅が400px以上になると､pのwidthが効きます｡画面サイズではないので､そこは注意が必要です｡

これで完成です｡

ちなみに､SCSSは最終的にCSSにコンパイルする必要があります｡例えば､vscodeの場合はプラグインで可能です｡

ちなみに､僕はCSSから入って､SCSSに乗り換えました｡楽しいのでお勧めです｡

さいごに

あまり使いどころはないと思いますが､このような方法もあるって感じで思って頂ければ幸いです｡僕の場合､メディアクエリから卒業して､コンテナクエリを使っています｡

この作例もコンテナクエリを使ったものとなっています｡なお､メディアクエリでも出来るのでお好みで取り組んでください｡