画面の幅に画像を合わせる。

HP作成の備忘録。

HPの画像。

PCでは最適なサイズなのに、スマホで表示すると大きすぎて切れていた。

こんな感じ👇🏻

何とか直したい。

と思って、調べた。

CSSに、以下の5行を加えたら、解決した。👇🏻

1.        /*画像サイズ最適化*/
2. img {
3.     max-width: 100%;
4.     height: auto;
5. }

なんて簡単なんだ。

max-width: 100%;　この％で、横幅を画面の何％までにとどめるか、を設定できる。

max-width: 50%;　の場合。

max-width: 100%;　の場合。

なんて簡単なんだ。

もっと早く調べればよかった。

ちなみに、いつもCSSのどこに書き込めばいいかで迷うのだけれど、今回私はフッターの設定の上に書き込んでみた。

詳しい方は、もっとスマートな場所に、もっとスマートな感じで書き込むのだろうけれど。

右も左もわからないよちよち初心者は、とりあえずちゃんと動けば満足。

さらに、CSSではなく、HTMLで個別の画像に設定することもできる。

1.        /*個別の画像サイズ最適化*/
2. <img style="max-width: 100%; height: auto;" img src="画像アドレス入力" alt="イメージ名" />

画像アドレスとイメージ名の所は、もちろん、変更の必要あり。

よし、また一つ出来たぞ。