CSSだけで画像をトリミングする方法3つとjQueryを使う方法1つ | Cappee Design

@cappeeです。 特にシステム案件のコーディングだと、縦横比が異なる画像を扱う場合も多いと思います。 例えばユーザー画像などを正方形で表示したい場合、アップされる元画像はユーザに委ねられるので画像のサイズや縦横比は様々になると思います。アップしたタイミングで画像を加工できるならいいですが、そうでない場合、見た目を整えるためにCSSで同じサイズにトリミングしてしまいましょう。 トリミングにもCSSだけで3つのやり方があるので、状況によって使い分けたいですね。 overflow: hidden を使う 一番オーソドックスなやり方がoverflow: hidden を使ってトリミングする方法です。 trimming というクラス名が入ったトリミングする枠用のタグはブロック要素である必要がありますので、もしインライン要素に指定する場合は、CSSに display: block; も追加してく

[sakamotz]

“.trimming { width: 60px; height: 60px; overflow: hidden; }”

[nilab]

CSSだけで画像をトリミングする方法3つとjQueryを使う方法1つ | Cappee Design

[kihan]

そういうやり方があるんだね

[HRD-u1]

“position:relative; height: 80px;”

[mikage014]

cssとjQueryで画像の切り抜き

[hanagejet]

流し読みしたけど良さげ。

[hisaka0228]

画像トリミングしたいので参考に

[typista]

ぽけったー CSSだけで画像をトリミングする方法3つとjQueryを使う方法1つ

[nzbambam]

クロップ