DOTLOG

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

どうもユーキです。
最近はレスポンシブサイトが当たり前な世の中になってますね。
PC固定幅、SPは可変幅ってことがかなり多いですが、リキッドレイアウトのサイトを作る際に、「画像の縦横比を保ったまま可変させたいんだけど、どんな設定がいいんだっけ?」ってなることが結構あるので、備忘録として記載しておきます。

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

プロフィール画像

ユーキと申します。27歳の道産子です。犬、ゲーム、お酒、食べること、旅行大好きです。飲み友募集中です。

2018/12より再びフリーランスになりました!

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

お問い合わせはこちら

Latest Posts

Popular Posts

TOP