縦横比を保ったまま画像幅を調整する方法
どうもユーキです。
最近はレスポンシブサイトが当たり前な世の中になってますね。
PC固定幅、SPは可変幅ってことがかなり多いですが、リキッドレイアウトのサイトを作る際に、「画像の縦横比を保ったまま可変させたいんだけど、どんな設定がいいんだっけ？」ってなることが結構あるので、備忘録として記載しておきます。
CSSの指定方法
img {
max-width: 100%;
width: auto; /* これは書かなくても効くはず */
height: auto;
}
これで可変されるようになります。
See the Pen test by tnyk35 (@tnyk35) on CodePen.0
まとめ
2019年になり最近ではブラウザ対応がIE11、IE Edge、その他は最新ということがほとんどになってきています。
vw、vhもどんどん使える状態になっているのでうまく組み合わせて調整するのをおすすめします。
