見る人を惹きつける、
ワンランク上の
WEBサイトを制作

メイン画像について

<!--▼▼▼▼▼ここから「メイン画像」-->
<div id="mainimg">
<div>

<div class="text">
<p>見る人を惹きつける、<br>
ワンランク上の<br>
WEBサイトを制作</p>
</div>

<div class="btn">
<p><a href="#"><i class="fa-regular fa-file-lines"></i>資料請求</a></p>
<p><a href="#"><i class="fa-regular fa-envelope"></i>お問い合わせ</a></p>
</div>

</div>
</div>
<!--▲▲▲▲▲ここまで「メイン画像」-->

主なスタイルは

cssフォルダのstyle.cssから「mainimg」でテキスト検索してみて下さい。詳しい解説もあります。

端末サイズでメイン画像が切り替わります

画面幅が420px未満の場合は、imagesフォルダ内の「mainimg_sh.jpg」が適用され、それ以上の場合は「mainimg.jpg」が適用されます。

「mainimg_sh.jpg」はアスペクト比2:3で、「mainimg.jpg」は16:9になっています。
それ以外のアスペクト比の画像でも問題なく表示されますが部分的に切り取られるので、厳密に出したいなら画像のアスペクト比を揃えておいて下さい。

アスペクト比を変更したい場合は、2箇所ある、
#mainimg {
の中のpadding-topの数値を変更して下さい。計算方法の参考はcssに書いています。

中のテキスト量を大幅に変更した場合

メイン画像(背景画像)とのバランスが崩れるのでその際はcssで調整して下さい。メイン画像のアスペクト比を変更する方が簡単かもしれません。