此処で、サムネイルの形状とサイズを共に(見掛け上)同一に揃える方法に関する先日の記事を思い出して頂きたいのですが、 (付録?の概念図にもあった如く)かの方法では「幅広」の画像程中央の表示領域(割合)が相対的に小さくなるという性質がありました。
画像の「高さ」を揃えて表示する為に「横に広い」画像程表示面積が大きくなるからです(表示枠のサイズは一定であるので)。
もし、縦長であるか幅広であるかを問わず サムネイル画像を本来の大きさのまま「枠」の中央に置く事が可能ならば、クリッピング範囲をより大きく確保できる筈。 ・・ 何か"手"は無いものでしょうか? ヒントは photoscope 自体にありました。 *それと此処
【 方 法 】 HTML/CSSで以下の設定を行います
サムネイル縦横サイズのシステム設定値が H 、W
表示時の(見掛上の)縦横サイズの値が h 、w
画像の 短辺/長辺 の最小値が P である時
h < W x P 且つ w < H x P
( 正方形の場合は s < S x P )
【 考 案 】
photoscopeでは実寸参照時にオリジナル画像は上下左右共頁中央に表示されます。
これは画像をIMGタグではなくbackground指定で「壁紙」として表示しているからです。
(ちなみに Slideshow もこの方法を使っています)
Aタグをblock化し サムネイルそのものの代わりにサムネイルの壁紙を表示させる訳。
本来のサムネイル画像はposition指定やmargin指定で表示位置を枠外にずらすという手も浮かびますが IEで不具合があったため記述も簡潔な上記の方法を採りました。
サムネイルカバー範囲が前記事のそれより広がっているのがお分かり頂けるでしょうか
AタグのCSS指定を他の文字列リンクのそれと区別するには やはりクラス指定を用いるのが適当と思われます。 ( 子要素で親要素のスタイルを指定可能なら楽なのですが )
或いはこれらをスクリプトに行わせるのも良いかもしれません。 無効環境(CSS含む)でも頁に表示されるのはサムネイル画像ですからそれ程違和感は生じないでしょう。
以前述べた方法はサムネイル画像が不要という簡便さと オリジナル画像が最初からロードされる為「クリック時の」反応が速い、という特長がある一方で、初見時のページ表示が(大サイズ画像が多数存在する場合は特に)重くなるというデメリットもありました。 こちらの方法はその逆の性質を持つ他 子要素が隠される為にマウスオン時 title要素が表示されないという性質があります。 Aタグをblock化する代わり透過GIFを用いるという方法もありますが・・
( 勿論「原法」でサムネイルを用いる 、という中間的手法もあるでしょう
)
| . |