Hatena::ブログ(Diary)

くろまほうさいきょうでんせつ RSSフィード

2011/05/17 (火)

CSSだけでサイズ不定画像の中央を正方形に切り抜きサムネイル (かんたん!)


前に書いた記事より良さそうな方法が見つかったので。
長方形の画像を正方形に切り出してサムネイルとする

サンプル


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


解説


HTML

<a href="">
  <img class="architrave_image" src="1pxの透過gif">
</a>

CSS

.architrave_image {
    height: 80px;
    width: 80px;
    background: url(目的の画像URL) no-repeat center;
}

  • <img>に以下を指定するだけ
    • srcに透過gifを指定
    • サムネイルのサイズを指定
    • バックグラウンド画像に表示したい画像を指定

元の画像のサイズを変更できないので、ほんとに巨大な画像のサムネイルとかには向かないです。

2011/04/08 (金)

長方形の画像を正方形に切り出してサムネイルとする (画像サイズばらばらの場合&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の使えないページでこういったサムネイル表示をしようとするとこの方法しかない気がします。
背景画像のサイズはいじれないのが弱点。切り出すサムネイル枠の大きさに対して元画像が大きすぎるとわけわからんサムネイルになっちゃう。