freefielder.jp

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

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

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

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

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

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

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

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

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

ということで。なかなか便利。