具体的にCSSを設定し、画像をトリミングして表示させてみる
表題だけではピンと来ないと思いますので、具体的に説明します。
こちらの写真、オリジナルなサイズは1200×900です。
http://www.motokazu.com/hiroshi/photo/1/P000001075.jpg
右上の「76」の看板をトリミングして、表示したい。
右上に、「76」とかかれた看板が写っています。この看板の部分の画像は 260～270px となります。
この看板をトリミングしてこのような 100×100として表示させたい時にに使えるHTMLです。
画像サイズ計算式
表示する画像のサイズ HHH(高) WWW(幅) px
オリジナルな画像のサイズ ORG.width (px) ORG. height (px)
オリジナルな画像の中で、切り取る位置 X1 Y1 X2 Y2
—- HTML —
<div style=”position:relative; height:HHHpx; width:WWWpx; overflow: hidden;”>
<img style=”position:absolute; clip:rect(Apx Bpx Cpx Dpx); top:-Apx; left:-Dpx” src=”画像URL” width=”W” height=”H” alt=”切り取り画像”>
</div>
— HTML 内の数値 —
Ratio.X = WWW/(X2-X1);
Ratio.Y = HHH/(Y2-Y1);
W = ORG.width * Ratio.X;
H = ORG.height * Ratio.Y;
A = Y1 * Ratio.Y;
B = X2 * Ratio X;
C = Y2 * Ratio.Y;
D = X1 * Ratio.X;
計算式に実測値を当てはめる
表示する画像のサイズ : HHH:100(高) WWW:100(幅) px
オリジナルな画像のサイズ ORG.width: 1200 (px) ORG.height:900 (px)
オリジナルな画像の中で、切り取る位置 X1:830 Y1:110 / X2:1080 Y2:390
Ratio.X = WWW/(X2-X1) => 100/(1080-830) => 0.4;
Ratio.Y = HHH/(Y2-Y1) => 100/(390-110) => 0.36 ;
W = ORG.width * Ratio.X; => 1200 * 0.4 => 480
H = ORG.height * Ratio.Y; => 900 * 0.36 => 324
A = Y1 * Ratio.Y; => 110 * 0.36 => 40
B = X2 * Ratio X; => 1080 * 0.4 => 432
C = Y2 * Ratio.Y; => 390 * 0.36 => 140
D = X1 * Ratio.X; => 830 * 0.4 => 332
HTML に埋め込むと
<div style=”position:relative; height:100px; width:100px; overflow: hidden;”>
<img style=”position:absolute; clip:rect(40px 432px 140px 332px); top:-40px; left:-332px” src=”http://www.motokazu.com/hiroshi/photo/1/P000001075.jpg” width=”480″ height=”324″>
</div>
上記のHTMLを埋め込んだサイト
http://www.motokazu.com/poky.org/
コメント