-ao- ramune blog

©2020 unio / GO2直営からふるラムネ

CSSで画像をレスポンシブにする

2019年10月09日
  • CSS

画像サイズをレスポンシブにしたいけど。。。

画像のレスポンシブデザインで、下記のようなCSSをよく見かけます。

画面の横幅に収まるように、画像のアスペクト比を保って拡縮する
                
                    img {
                        width: 90%;
                        height: auto;
                    }
                
            

確かにアスペクト比は維持されますが、これでは元の画像サイズを超えて拡大されてしまいます。

max-widthを使う

画像サイズを超えて拡大しないようにする場合はmax-widthを使います。

max-widthで指定
                
                    // 画像の親ノード横幅に対して、最大90%の横幅サイズを維持する
                    img {
                        max-width: 90%;
                        height: auto;
                    }

                    // ビューポート横幅に対して、最大90%の横幅サイズを維持する
                    img {
                        max-width: 90vw;
                        height: auto;
                    }
                
            

これで、画像サイズよりも画面の横幅が狭い場合にだけ縮小して、横幅が十分な場合は元の画像サイズを維持できます。

プロフィール画像
なかのひと:unio

数十年前の牧歌的なインターネッツが好きだった、永遠のモラトリアム人。 ただ、モラトリアムしててもお金は増えないので、しゃかいの厳しさを斜め後ろから眺めつつほそぼそと生活しています。

Twitter GitHub
[広告]