スポンサーサイト

Category : スポンサー広告
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

長方形(4:3比率)の写真画像を正方形に切り抜いてサムネイル風に表示するランダムスクリプト

Category : javascript

 

これ実は長方形の写真画像をCSSで切り抜いています。
twitpic の脇にあるような正方形サムネイルが作りたくて、まずはランダム表示できるスクリプトのCSSレイアウト版を『前回記事』で紹介しましたが、このままだとデジカメなどの写真画像はそのまま長方形(4:3)の比率で表示されてしまいます。

今回、縦置き・横置きの2パターンの画像をCSSで正方形に切り抜いたサムネイルを作ってみたので紹介したいと思います。(※表示確認はIE8、Firefox3.5.6のみ)

CSSで画像を切り抜く前に最も問題だったのが、画像の中央配置です。
特に一番の問題だったのがCSSを使った縦のセンタリングで、4:3の比率の画像を縦置き、横置きにした場合でセンターの位置が異なってしまうのを何とかしたいと思って方法を色々探してみましたが、今ひとつ有効な方法がなく結果的には、縦置き・横置き各それそれに対応したCSSを割り当てる事によって縦横の比率が異なる場合でも画像の中央が正方形の中心に表示されるようなサムネイルを作っています。ちなみにMT4.25~ではこちらが参考になります。
サイドバーのサムネイルを全部正方形にする square="1"編 (MT4.25~)

ランダムサムネイル用のJavaScriptコードはこんな感じ。

clipプロパティで両端をカット

各画像に横置き(style-1)、縦置き(style-2)のCSSを割り当てることで正方形サムネイルを表現しています。本当は1つのCSSで自動的に正方形に見せられる方法を採りたかったのですが、画像の中央配置をする上で、縦のセンタリングをCSSで表現する事が困難だったため、結果的には画像に2種類のCSSを用意して枠の中央にくるようなポジション値を各それそれに指定する事で対応しています。(この方法だとあらゆるサイズの画像にも対応は出来ますが、けっこう手間なので出来れば1つのCSSで表現したいところです。)

(今回は断念しましたがCSSでの上下中央揃えでとても参考になりました。)
CSS で簡単に上下中央揃えを実現する
異なるサイズの画像を縦横中央配置にしてリスト状に並べる

CSSはこんな感じ。

CSSで画像を切り抜くには、overflow:hidden;でボックスからはみ出した部分をカットする方法と、clipプロパティで画像の指定部分のみを表示させる方法と2種類あります。(他にもあるのかな?)

IEでは画像をマウスクリックした時に画像周囲にdotted:1pxのボーダースタイルのようなラインが出来るですが、overflow:hidden;でカットするとこのリンク枠のラインが思ったように出せなかったので、clipプロパティとボックスをdisplay : inline-block;としてリンク幅を調整する事で、切り抜いた画像幅をリンクの範囲枠として見せかけています。clipプロパティについては、-ボックスの表示する範囲を指定する- で紹介されているので参考にしてみて下さい。

※サムネイル化するにあたってwidthやheightで画像を縮小すると画像が粗くになりますが、CSSに
( img { -ms-interpolation-mode: bicubic; } )を入れると綺麗に表示してくれるみたいです。
画像をCSSだけでハイクオリティに縮小サムネイル化する方法

(Photo by clearweather)
スポンサーサイト

Comment

非公開コメント

カテゴリ
More photos(test.ver3)

 
最新記事
最新コメント
最新トラックバック
月別アーカイブ
アクセスランキング
[ジャンルランキング]
アニメ・コミック
8987位
アクセスランキングを見る>>

[サブジャンルランキング]
その他
1711位
アクセスランキングを見る>>
リンク




QRコード
QR
RSSリンクの表示
検索フォーム
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。