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

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を指定
    • サムネイルのサイズを指定
    • バックグラウンド画像に表示したい画像を指定

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