和洋風KAI

【CSS】スタイルシートで画像を縦横比そのままにリサイズする方法。

「ウェブサイト全体の画像の横幅をリサイズしたいけど数が多すぎてめんどくさい!」

って時に使える技をお教えします。

スタイルシートを使って画像を縦横比そのままにリサイズする方法。

以下のスタイルシートを組み込むことで、縦横比をそのままに画像をリサイズすることが出来ます。

img{
max-width: 300px;
height: auto;
}

もちろん縦幅でもできます。

img{
width: auto;
max-height: 300px;
}

お手軽にリサイズ出来てしまうので、ぜひ使ってみて下さい!

するぷはこう思った。


僕はスマホ用のサイトをレイアウトするときにこの技を大変重宝しました!