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;
                    }

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