はい、雪を一度も見ないまま もう３月であります。
年頭に何かやるつもりだったような気もする管理人です。 こんばんは。
先月は後半から急に画像付いてしまいまして。 「オレもまだ、こんなに熱中出来る事があったんだな〜」 とか感慨に耽ってみたり。 普段無縁な画像ハンドリングにも多少慣れる事が出来たのは良かったのですが、果たして自分のblogに還元出来るものやら否や。
・・などと思案に暮れてみたり。
そうこうしながらいつもの某板を覘いております時に、先月の記事とちょこっと関係ありそうなスレが目に留まりました。
曰く、「画像のサイズ指定と縮小について」
最初は質問の意味が良く分かりませんでしたが 要約すると以下のような御趣旨の様子。
「形状・サイズが夫々異なる画像から縦横比を崩さず同一サイズのサムネイルを作りたい」
（ う”〜ん。 無理 ） というのが正直な感想でしたが 何と解答を付けられた方が！
・・・いや、クリッピングという手がありましたか。 う〜む。 成る程〜
manannanさん御提示の方法は”画像サイズ”を同一にするのでなく 画像を一定サイズの”枠”に嵌めてしまおう、というもの。 確かに、これなら画像が変に歪んでしまう心配はありません。
・・感心する一方で ちょっとしたフラストレーションも浮かんで来ました。
（ 画像の中央部を使いたいよな？ ）
何とかならないかと思案する事暫し、「解」と思しき方法を見つける事ができました。
【 方 法 】 ＨＴＭＬ／ＣＳＳで以下の設定を行います
【 解 説 】
画像を”枠”の（≒枠を画像の）中心に持って来てハミ出た分は切り落とす、というもの。
通常の方法では 不定サイズの画像をそれより小さい枠の中心に置く 事はできません。
しかし、それ自身より大きな枠ならば中心に画像を置く事は （ text-align:center を用いる事により）可能です。 クリッピングの為の「外枠」とは別に
「高さ」と「幅」が定まった「内枠」を用意してその中心に画像を置き、 この内枠の中心を取れば画像の中心も取れる道理。
★ポイントは画像(表示時)の幅ではなく「高さ」を一定にする事であると了解頂けますでしょうか。
極端な縦長・横長画像が混在していない限り（フィルムの縦横比程度の範囲であれば）、画像表示高を「外枠」の２倍弱に設定すれば（全ての画像が幾ばくか周辺を削られる事になりますが）いい塩梅になる筈です。
（ 内枠≒Ａタグの width は余裕を持って設定すること）
SPANが width:W; height:H; 、 Ａが width:W2; height:H2; であり
画像の最大縦/横比が Z1 、 最小縦/横比が Z2 である時
H2 ＞ W * Z1 ＞ H
W2 ＞ H2 / Z2
また、この方法は別途サムネイルを用意する必要がありません（元画像単独でＯＫ）。
ＵＡも選びませんから 結構「使える」 ＣＳＳ技かも？ （ double-box technique ）
| . |