ワードプレスでレスポンシブ対応に画像を設定するために使ったcssコマンド

ワードプレスでレスポンシブ対応に画像を設定するために使ったcssコマンド

メモ書き

当ブログ、まだまだ未完成の状態で公開されてしまっているのですが、今日は記事の中の画像がレスポンシブ対応になっておらずスマホなどの幅が狭い画面で表示した時に記事内で使用している画像(特にサイズの大きいもの)が余裕で画面からはみ出ていて残念な感じになっていたので、画面の幅に合わせて画像もしっかり幅に合わせてくれるようにしました。

やり方としては以下のcssコマンドを追加しました

img{
max-width:100%;
height:auto;
}

max-width:100%の指定をすることで画面の幅が画像よりも小さくなったとしても画像の最大幅は画面いっぱいの100%に収まるのでこれで解決。
height:auto;で幅が縮んだ画像の比率も自動的に調整してくれます。

以上短めのメモ書きでした。

Pocket
このエントリーをはてなブックマークに追加