記事を投稿するときに画像をアップロードして埋め込んでみると、画像サイズによっては歪な状態になってしまいます。
画像をアップロードしてみると・・・
画像サイズは「中サイズ」や「大サイズ」を選択するだけで調整が可能です。
埋め込まれるソースコードは以下のようになり、画像の横幅(width)と高さ(height)の数値は自動でセットされます。
この状態でスマホで表示してみると・・・
画像の横幅がスマホ画面の横幅より大きければ、画像が切れてしまいます。
そこで、imgタグの要素を少し変更します。
「width」を100%にすることで、見ている端末の横幅一杯まで画像を広げてくれます。また、「height」をautoにすることで横幅の比率に合わせて高さを自動調節してくれます。
変更後にスマホで見てみると・・・
横幅が切れずに画面一杯表示できています。高さも横幅が広がったのに合わせて比率を合わせて自動で広がってることが分かります。
各画像でこれらの設定をすることで、異なる画像の横幅を合わせることができることになります。
ただ、この状態だとパソコンブラウザで見たときに横幅一杯に広がって拡大されてしまいます。そのため、これ以上広がってはダメという場合は横幅の最大サイズをスタイルシートで設定してあげる必要があります。
過去、画像へ枠線をつけるためにスタイルシートを作りましたが、そのimgタグ要素に「max-width」を追加します。
過去の記事はコチラから↓
【WordPress】画像に枠線を付けてみる
「max-width:400px」にすることで、画像の横幅が400pxより広がらなくなります。
便利ですよねー。
