
--
--/--
--
--/--
--
各画像に横置き(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プロパティについては、-ボックスの表示する範囲を指定する- で紹介されているので参考にしてみて下さい。Trackback