縦横比を保ったまま画像幅を調整する方法

どうもユーキです。
最近はレスポンシブサイトが当たり前な世の中になってますね。
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もどんどん使える状態になっているのでうまく組み合わせて調整するのをおすすめします。

COMMENTS

About Me

プロフィール画像

ユーキと申します。北海道恵庭市という札幌と新千歳空港の間でフリーランスのWebエンジニアとして活動してます。

当サイトのブログでは、主にWeb制作全般、フリーランス周りの情報など色々なノウハウや知識を載せています。
その他日々気になったこと、思ったことも書いてます。

お仕事の相談など何かありましたら、お問い合わせかツイッターのDMからお気軽にご連絡くださいませ。

お問い合わせはこちら

ツイッターはこちら

ポートフォリオはこちら

Latest Posts

Popular Posts

TOP