CMSで便利なCSSを使った画像をリサイズする方法

2008年2月22日

僕は仕事ではCMSを使用した案件がメインになっているのですが、CMSを使用した際に頭を悩ませる問題として、クライアントが縦横比率の違う画像を使用することによってレイアウト崩れを起こすことがあります。

その問題をスクリプトを使用せずにCSSだけで解決できそうな方法を見つけたのでご紹介しようと思います。

概要はCSSのOverflowを応用して画像を綺麗にリサイズ表示する事ができるようです。CSSで画像を固定サイズにトリミング表示できるという事ですね。トリミングしてリサイズされた画像はマウスオーバーで全体表示がすることができます。

Create Resizing Thumbnails Using Overflow Property

MTのようなCMSは基本的にWEB制作の知識のない相手に更新・管理・運用をしてもらう事が目的なので、それらを見こしたサイト設計が必要なんですよね。

例えば、商品の一覧などで画像を列にして並べる際に、他横比率が合ってないとガタガタのレイアウトになってしまいます。それを回避するためにheghitline.jsという便利なスクリプトもありますが、これは画像を囲っている親要素のブロック要素をそろえる機能なので、このように画像だけをリサイズするためには使用できません。画像だけをリサイズしたいという時などはこのようなCSSトリックを使用するとおもしろそうですね。

使い方はまだ、実験して確認していませんが以下のようなCSSを指定することで実装できるようです。

XHTML

<p class="thumb"><a href="http://cssglobe.com/"><img src="image.jpg" /></a></p>

CSS

p.thumb{
float:left;
margin:.5em 0;
margin-right:10px;
border:1px solid #999;
padding:2px;
}
p.thumb a{
display:block;
float:left;
width:100px;
height:100px;
line-height:100px;
overflow:hidden;
position:relative;
z-index:1;
}
p.thumb a img{
float:left;
position:absolute;
top:-20px;
left:-50px;
}
/* mouse over */
p.thumb a:hover{
overflow:visible;
z-index:1000;
border:none;
}
p.thumb a:hover img{
border:1px solid #999;
background:#fff;
padding:2px;
}
/* // mouse over */