画像の比率を保ったまま枠内に収めて縦横中央表示するCSS(IE8対応)

divタグなどの枠内に画像を入れる時、縦横中央表示にして、かつ、枠のサイズより大きければ枠に収まるように画像の比率は変えずに小さくしたいということがあると思います。というより、先日自分はそういう事態に遭遇しました。

まず、サイズの比率を保ったまま、枠内に収める方法ですが、いろいろ試行錯誤した結果、下記のようにするとうまくいくことが分かりました。

img{
    width:auto;
    height:auto;
    max-width:100%;
    max-height:100%;
}

widthとheightは普通、デフォルトがautoなので指定しなくていい場合が多いのですが、autoじゃないと動かないため指定しています。

上記の記述だと、枠(この場合、imgタグの親要素)のサイズより大きければ、max-widthとmax-heightの指定により、それ以上のサイズを超えないようになるので、枠に収まってくれます。最初はてっきり、どちらも100%のサイズになってしまうのではないかと思ったのですが、どうやら大きい方にあわせて縮小されるようです。

次に、縦横中央表示の方法ですが、横は簡単です。親要素に『text-align:center』を指定してやればいいだけです。問題は、縦の中央表示。いろいろ調べてみると、:before擬似要素を使って下記のように書くと、縦横中央表示する方法があることが分かりました。

.frame{
    font-size:0;
    text-align: center;
}
.frame:before{
    content:"";
    display: inline-block;
    height:100%;
    vertical-align: middle;
}
.frame > img{
    width:auto;
    height:auto;
    max-width:100%;
    max-height:100%;
    vertical-align: middle;
}

before擬似要素をinline-blockとし、縦方向の揃えをmiddleとしています。同じく画像のほうもmiddleとすることにより、どちらも縦中央表示になります。ただ、inline-blockにすると余計なスペースができてしまうので、そのスペースを無くすために、枠の要素にfont-size:0の指定をしました(参考:display: inline-block の隙間を詰める方法 | Soraxism)。

ちなみに、IE8には対応していませんが、画像をCSSのbackground-imageで指定し、background-sizeをcontainとすると、枠に収まるようになりますが、この場合、枠のサイズより小さければ画像が拡大して枠のサイズに合わせて表示するようになります(もちろん、そのほうがいいということもあると思います)。

なお、IE8対応しなくていいのであれば、フレックスボックスやtransformを使って縦中央表示できます。

フレックスボックス利用

.frame{
    display:-ms-flexbox;
    display:-webkit-box;
    display:flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
}

transform利用

.frame--transform{
    position:relative;
}
.frame--transform img{
    position:absolute;
    top:50%;
    left: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    -ms-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
}

下記にサンプルリンクを載せておきます。background-size:containを使った結果、フレックスボックスを使った結果、transformを使った結果も載せています
フレームサイズ:100×150、画像サイズ:175×200
フレームサイズ:100×150、画像サイズ:200×175
フレームサイズ:175×200、画像サイズ:100×150
フレームサイズ:175×200、画像サイズ:150×100
サイズランダム

コメント

  1. 2005年生まれの男子 より:

    ネット上で紹介されている画像比率維持関係のボックス操作は、出鱈目な記述ばかりなので参考になりました。
    説明文が残念な箇所が多々ありましたが、簡潔かつ確実に動作するcssコードでした。

  2. 匿名 より:

    うまくいきました!
    まさに探し求めていた情報です!
    ありがとうございます!

  3. 匿名 より:

    あざっす

  4. 匿名希望 より:

    まさに探していた情報でした。
    このCSSコードにより縦長の画像は中央寄せ出来ました。
    質問なのですが、横長の画像を中央寄せするには、
    このコード以外にどんな物を入力すれば良いのですか?
    もしご存知でしたら、横長の画像の中央寄せの方法を、
    教えて頂けないでしょうか。よろしくお願いします。

    • amyu より:

      横長の画像でも中央寄せにできると思いますよ。
      画像を枠に収めて縦横中央表示
      こういうことじゃない? それとも、うまくいかないですか?

      • 匿名希望 より:

        そういう事なんです!!
        どうしても上下中央表示が上手くいきません。
        該当するページのURLを載せたいのですが、これも上手くいきません…

        • amyu より:

          うーん。何か足りないか記述を間違っているだけだとは思うのですが……。
          F12キーで開発者ツール使って調べてみると何か分かるかもしれません。

タイトルとURLをコピーしました