Laby-Lab

オリジナル画像(600x450)の縦横1/3表示。
<img style="width:200px;" border="0" alt="" src="■.jpg">
赤字が追加した部分。

2枚目はオリジナル画像の左上(200x150)をトリミングしたもの。
<img style="position:absolute;clip:rect(0 200px 150px 0);" border="0" alt="" src="■.jpg">
トリミングした画像サイズが切り抜きサイズ(200x150)とは認識されず、画像の下にテキストが潜り込むようになる謎仕様。

ここでは説明のため、画像を左200px、テキストを右300pxと完全に分離して表示する。
赤字中のrect()内の4つの数字は分かりにくいが、順番に上、右、下、左と、時計回りに座標指定をする謎仕様。
数学的に分かりやすい書き方をすると、rect(y0 x1 y1 x0)となるのか？
(x0,y0)がトリミングする左上の座標で(x1,y1)がトリミングする右下の座標。
従って切り抜き画像サイズは(x1-x0)×(y1-y0)となる。

<img style="position:absolute;clip:rect(150px 275px 300px 75px);margin:-150px 0 0 -75px;" border="0" alt="" src="■.jpg">

サイズを変えずトリミングの始点を(75,150)にしたもの。rect()内の数値の変化に注意。順序が分かり辛いったらないね(--;
元画像はあくまでそこにあって、rectで指定した範囲だけ表示させているので、実際に画像を表示させたい場所から始点座標(x0,y0)の分だけずれる事になる。

ここではmarginを指定して画像を移動させている。指定方法はmargin:上 右 下 左。
margin-top:-150px、margin-left:75px、と上と左だけ指定してやっても良い。

<img style="position:absolute;clip:rect(150px 275px 300px 75px);margin:-150px 0 0 -75px;width:400px;" border="0" alt="" src="■.jpg">
3枚目の画像サイズを(400x300)に縮小したもの。切り抜いたものが縮小されるのではなく、縮小画像(400x300)に対して(75,150)-(275,300)の範囲がトリミングされることが分かる。

大きい画像を縮小してトリミングする時は画像範囲外をトリミングしてしまわないよう、縮小後のサイズを把握しておこう。

160x120に縮小してちょうど良い100x100の画像を切り出す練習。
練習素材は「ねんどろいど 藤和 エリオ」（あみあみ様）でした♪

最近6話ほど見ました。キャラクターの外観も可愛いけど性格がすごく可愛い。特に流子がすごく良い！