長方形の画像を正方形に切り出してサムネイルとする (画像サイズばらばらの場合＆CSSのみで実装)

CSS

2011/05/17 画像タグのみ版追加→CSSだけでサイズ不定画像の中央を正方形に切り抜きサムネイル (かんたん！)

長方形の画像の中心部を正方形に切り出してサムネイル表示したいんだけど、縦横比が定まってない画像の場合ってどうやって中心部を切り出したらいいかしらね、という話。

画像の縦横比が分かっている(一定である)場合

このケースであればoverflow:hiddenな枠で画像を囲って位置を調整してあげればOK。特に問題は無いでしょう。
↓等が参考になるかと思います。
http://www.multi.ne.jp/staff_note/2008/10/000543.php

画像の縦横比が不明だったり画像ごとにばらばらな場合

前述の方法だと、画像の真ん中辺を表示するために何pxずらして表示すればいいのか分かりません。できるエンジニアなら「じゃぁサーバーサイドでやるわ」とか「JavaScriptでサイズ取得するわ」とかになるんでしょうが・・・

「せっかくだからおれはこの"background:url()"を使うぜ！」

CSSで長方形画像の真ん中へんを正方形に切り抜きサムネイル - jsdo.it - share JavaScript, HTML5 and CSS

HTML

<h2>オリジナル画像 original</h2>
<img src="http://画像URL">

<p>↓</p>

<h2>切り抜いたもの architraved</h2>
<div class="architrave_image">
    <a href="http://画像URL"></a>
</div>

CSS

.architrave_image {
    height: 80px;
    width: 80px;
    background: url(http://画像URL) no-repeat center;
}
.architrave_image a {
    display: block;
    height: 100%;
    width: 100%;
}

なにをしているのか

  • CSSで縦横比を固定した<div>の背景画像として表示
  • 背景画像はcenterを指定して真ん中にそろえる
  • <div>内の<a>タグはdisplay:block;を指定してクリックできるようにする

このようにすることで、元画像の縦横比やサイズを気にすることなく中心部を任意の形で切り出し表示できます。
画像が多くてサイズもばらばらの場合、JavaScriptの使えないページでこういったサムネイル表示をしようとするとこの方法しかない気がします。
背景画像のサイズはいじれないのが弱点。切り出すサムネイル枠の大きさに対して元画像が大きすぎるとわけわからんサムネイルになっちゃう。