カレンダー

11 | 2016/12 | 01
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31

広告



最近の記事

カテゴリー

DATE: CATEGORY:DEV


ある画像をブログに貼り付けるにあたって、
いちいちダウンロードして、画像編集ソフトで切り取りして、
アップロードしてから貼り付ける、、、とか面倒くさい。

でも、1枚そのまま貼り付けるとサイズも大きいし、
邪魔になるので記事も読みにくくなる。

ってな時にimgタグの画像をCSSで簡単に切り取る方法
流用できるコードの紹介。

普通に貼り付けてみる



The View
The View by laverrue

表示画像
The View
The View by laverrue

この画像の特定の場所だけCSSをうまく使って
切り出してみます。

切り取って貼り付け


では、画像の一部を切り取ってみましょう。


The View
The View by laverrue

表示画像

The View
The View by laverrue

画像は同じ物を使いつつ、
キレイに切り出せました☆

これ何をしてるのか、の概要。


500×333のオリジナル画像について、
画像の全体の
 ・上段は、画像上から50px
 ・右端は、画像左から400px
 ・下段は、画像上から200px
 ・左端は、画像左から100px
の部分だけを切り出しています。

そしてもう少し詳細


少し詳細を記載します。

設定するpx数とかは画像やブログに合わせて
調整してもらえばOK。

divタグ

まず、div & relativeタグにimgタグを挟み込んで
表示される画像の場所を安定させてます。
念のため、divの範囲をはみ出した場合部分は
非表示となるよう、overflowはhiddenにしとく。

imgタグ

画像自体の切り抜き場所は先に書いたとおり、clip:rectで設定。
「clip:rect(50px 400px 200px 100px);」
これは、こんな意味合い。
「clip:rect(上 右 下 左)」
 ・「上」は、画像上から50px
 ・「右」は、画像左から400px
 ・「下」は、画像上から200px
 ・「左」は、画像左から100px

clip

ただ、削った部分も実態としては残ってしまう。
今回、画像を上から50pxのところから切り取っているが、
0~50pxまでの画像も残っているので、topで-50を指定して
上にずらしておく。
もちろん、左右も切り取りをコントロールした場合は、
left: **px; とかで調整する。

ただ、このままだとこの画像の下の文字とかが
ごっそり画像と被ってしまう。ここで再びdivの出番。

再び、divタグ

divの高さをコントロールします。
今回は、画像の上から200pxとってますが、top-50だけ
ずらしているので、その差を「height:150px」で補正する。
(widthも画像サイズが大きい場合は使っても良いかも)

あとは色々px指定で好きなように画像切り取りが
出来るようになります。

参考


clip: rect(***);:画像を切り抜く

タグ : TECH CSS img 切り取る

Comment

コメントの投稿

管理者にだけ表示を許可する


トラックバック


この記事にトラックバックする



copyright © なんとなしの日記 all rights reserved.
内職☆在宅ワークの最強は?アフィリエイト!. 初心者だってカッコ良いホームページ作るぅ!
Powered by FC2ブログ
Related Posts Plugin for WordPress, Blogger...