【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;
}
.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;
}
ただし、表示する画像の元の幅と高さの両方が、表示したい領域の幅と高さよりも小さいと、下のような表示になります。
ということで。なかなか便利。
コメント