画像をウィンドウいっぱいに切ることなく表示することができないという事を理解しない人のために説明を試みる。Home画像をウィンドウいっぱいに切ることなく表示することができないという事を理解しない人のために説明を試みる。18:30最近のWebデザインの流行りとして、以下のようにページトップに巨大な画像をウィンドウいっぱいに表示する、というのがある。Hero(ヒーロー)などと呼ばれている(なんでやろ)。くにあるフレッシュジュースのお店(このページの制作は私ではありません)このヒーローを制作する際、画像全体をトリミングする事なく常にウィンドウぴったりに入れて欲しいという要望が時々ある。我々デザイナーはそれが矛盾を含んでいて不可能である事を即座に理解できるが、それをまったく理解しない人に最近遭遇した。ネットの掲示板でも同様の質問をしている人がいたので、理解できる人とそうでない人がいるようだ。幾何学的な思考能力が弱い人がいるようである。いう人がクライアントで、「出来ません」と返答してしまうと、「制作者に技術がない」「無能だ」というレッテルを貼られかねない。「無能なのはオマエだ」とクライアントに言い返せればいいのだが、なかなかそうも行かないと思うので、同じことで困っている人に向けて説明してみようと思う。使いたいのは以下の画像とする。サイズは400×300、縦横比は4対3だ。こんな小さい画像を拡大したら荒れてしょうがないが、この際サイズはあまり関係ない。縦横比こそがが最重要である事をまず念頭に置いて欲しい。ブラウザのウィンドウサイズが1200×900だとする。サイズは画像の縦横3倍(面積比9倍)だが、縦横比は4対3と図1の画像と同じである。よってウィンドウいっぱいに画像を拡大すれば、ピッタリとキレイに収まる事になる。ユーザーがブラウザを操作し、ウィンドウのサイズを変更したとする。変更後のサイズは1200×675。今の液晶テレビの規格と同じである。図1の画像をこのウィンドウいっぱいに表示しようとすると、図3か図4のいずれかになる。図3は上下が若干切れてしまっている。これを解消しようと上下を入れようとすると、今度は図4のように左右に隙間が生じる。この状態は、テレビ番組で古いVTRを流す時、両サイドが空いている事がよくあるので見た事がある人も多いだろう(タケモトピアノのCMがいまだにそうである)。ウィンドウサイズを変更しよう。今度は768×1024。画像とは比率が逆になる。すると図5、6のようになる。今度は左右が切れるか、上下に隙間が生じるようになる。図6は、家庭のテレビで映画のDVDなどを見る時によく見る状態である。テレビと映画のスクリーンの縦横比が違うためにこれが生じる。ウィンドウぴったりに画像を入れてみよう。すると図7、図8のようになる。このように、縦横比の違う画像を無理矢理ウィンドウに合わせれば、当然ながら変形してしまう事になる。これを変形させずにウィンドウぴったりにするはどうするか。