【CSS】画像を領域内にぴっちりと収める。

高さと幅が決まっているある領域内に、画像を綺麗に表示したい。

例えば、以下のような正方形の領域があったとして、その中に画像をきっちりはめ込みたいのだけれど、さて、すっきりスマートな方法はあるのかいな、という話。

"きっちり" というのは即ち、

横長の画像の場合は横幅を領域いっぱいに、上下には均等にマージンを。

縦長の画像のときは縦を領域いっぱいに、左右に均等マージン。

スクエア画像の場合には領域ぴったりに。

…と、こういう具合にしたいのですが、これ、元画像の縦横比率で場合分けしたりせずとも、あるいは JavaScript で動的に何某しなくとも、以下のようなスタイルシート一発で実現できます。

重要な設定は、赤字の部分。

/* 外枠に設定する class */
.img_outer{
    position: relative;
    width: 480px; /* 領域の幅を指定 */
    height: 480px; /* 領域の高さを指定 */
    margin: 1em 0;
    border: 1px solid #333;
    background-color: #9e9;
}

/* 画像に対して指定する class */
.inner_photo{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: auto;
    width: auto;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
}

ただし、表示する画像の元の幅と高さの両方が、表示したい領域の幅と高さよりも小さいと、下のような表示になります。