CSSを使って写真をトリミングするメモ #CSS

CSSを使って写真をトリミングするメモ #CSS

絶賛成長中のうちのガジュマルさんの写真をもとに、CSSを使って画像のトリミングをします。この画像はwidth=”300″ height=”252″のサイズです。

さらに成長中

1. 正方形にトリミングする

画像のサイズがwidth=”300″ height=”252″になっているので、divのサイズをwidth=”250″ height=”250″で考えます。

HTMLは画像をdivで囲むくらいの記述。

CSSのほうは、こんな感じ。

出力サンプルはこんな感じ。

さらに成長中

2. 円形にトリミングする

円形にするには、border-radiusの値を50%にすればOK.

CSSのほうは、こんな感じ。

出力サンプルはこんな感じ。

さらに成長中

3. 角丸にトリミングする

角丸にトリミングするには、CSSのborder-radiusの値を調整してあげればできます。

CSSのほうは、こんな感じ。

出力サンプルはこんな感じ。

さらに成長中

4. 八角形にトリミングする

八角形にトリミングするには、CSSのtransformを使ってdivとimgを回転させます。

CSSのほうは、こんな感じ。

さらに成長中

この八角形のトリムは偶然できちゃった代物なんですけどねw

まとめ

こんな感じで、画像処理をしなくてもCSSだけで写真のトリミングができちゃいます。やれる数は限られてきますけども。


Back to Top