CSSのみを用いて画像の一部をトリミングし、トリミングした画像を指定のサイズで表示する方法

具体的にCSSを設定し、画像をトリミングして表示させてみる

表題だけではピンと来ないと思いますので、具体的に説明します。

こちらの写真、オリジナルなサイズは1200×900です。

http://www.motokazu.com/hiroshi/photo/1/P000001075.jpg

右上の「76」の看板をトリミングして、表示した。

右上の「76」の看板をトリミングして、表示したい。

右上に、「76」とかかれた看板が写っています。この看板の部分の画像は 260~270px となります。

この看板をトリミングしてこのような 100×100として表示させたい時にに使えるHTMLです。
css_trimming_results

画像サイズ計算式

表示する画像のサイズ 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/

スポンサーリンク
レクタングル(大)
レクタングル(大)

シェアする

  • このエントリーをはてなブックマークに追加

フォローする