タグ

ブックマーク / favopict.blog15.fc2.com (1)

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

    これ実は長方形の写真画像をCSSで切り抜いています。 twitpic の脇にあるような正方形サムネイルが作りたくて、まずはランダム表示できるスクリプトのCSSレイアウト版を『前回記事』で紹介しましたが、このままだとデジカメなどの写真画像はそのまま長方形(4:3)の比率で表示されてしまいます。 今回、縦置き・横置きの2パターンの画像をCSSで正方形に切り抜いたサムネイルを作ってみたので紹介したいと思います。(※表示確認はIE8、Firefox3.5.6のみ) CSSで画像を切り抜く前に最も問題だったのが、画像の中央配置です。 特に一番の問題だったのがCSSを使った縦のセンタリングで、4:3の比率の画像を縦置き、横置きにした場合でセンターの位置が異なってしまうのを何とかしたいと思って方法を色々探してみましたが、今ひとつ有効な方法がなく結果的には、縦置き・横置き各それそれに対応したCSSを割り当

    kiti-net
    kiti-net 2012/07/31
  • 1