画像の縦横比を変えずにボックスに収めて表示させる方法 ＋セットでよく使うCSS

こんにちは、Web事業部のウエノです。 ショップサイトの制作時、商品一覧をきれいに見せたいときによく使うCSSです。 単純ですが初めて実装しようとしたときはやや苦戦しました。 セットでよく使う、画像をボックスの上下左右中央寄せで表示する方法も一緒にご紹介します。

img画像の縦横比はそのままボックスに収めて表示

特に解説するほどのものでもないので、まずはCSSをご紹介。 [html] <div> <img src=”sample.jpg”> </div> [/html] [css] img { width: auto; height: auto; max-width: 100%; max-height: 100%; } [/css] 横長の画像はボックスの横幅いっぱいに、縦長の画像はボックスの縦長いっぱいに表示されます。 また、横も縦もボックスより小さい画像はそのままのサイズで表示されます。 レスポンシブサイトの場合でも特に書き足したりする必要がなくて便利。

画像をボックスの上下左右中央寄せで表示

positionプロパティを使う方法

よく使われているテクニックですが、合わせて使うことが多いのでこちらもご紹介します。 [html] <div> <img src=”sample.jpg”> </div> [/html] [css] div { position: relative; } img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } [/css]

フレキシブルボックスレイアウトを使う方法

positionプロパティを使いたくない場合はこちらの方法がおすすめ。 [html] <div> <img src=”sample.jpg”> </div> [/html] [css] div { display: flex; justify-content: center; align-items: center; } [/css] 一つ目の方法に比べ、こちらの方がCSSがすっきりしています。 ただし、「IE10」「iOS 6.1以前のSafari」「Android 4.3以前のAndroidブラウザ」にも対応したい場合はベンダープレフィックスが必要なので注意。