CSSだけで画像をトリミングする方法3つとjQueryを使う方法1つ | Cappee Design
@cappeeです。 特にシステム案件のコーディングだと、縦横比が異なる画像を扱う場合も多いと思います。 例えばユーザー画像などを正方形で表示したい場合、アップされる元画像はユーザに委ねられるので画像のサイズや縦横比は様々になると思います。アップしたタイミングで画像を加工できるならいいですが、そうでない場合、見た目を整えるためにCSSで同じサイズにトリミングしてしまいましょう。 トリミングにもCSSだけで3つのやり方があるので、状況によって使い分けたいですね。 overflow: hidden を使う 一番オーソドックスなやり方がoverflow: hidden を使ってトリミングする方法です。 trimming というクラス名が入ったトリミングする枠用のタグはブロック要素である必要がありますので、もしインライン要素に指定する場合は、CSSに display: block; も追加してく
フリー素材*ヒバナ* *
ようこそ “フリー素材 * ヒバナ”は紙・和紙・布地・レース・木目・花びら・文房具・手芸などをテーマに、 ウェブサイト・ブログに利用できるシンプルな背景素材・アイコン素材などのフリー素材を作製し、配布しています。 色を変えたり、リサイズ・減色・コラージュなど自由に加工して下さい。 詳しくは、利用条件を良くお読みください。 新作フリー素材 レースの背景素材追加 縦横・サイズ違いあります。 定規のチロリアンテープ一列背景素材追加 縦横、2サイズ3色あります。 鉄琴とべルのチャーム素材追加 サイズ違いあります。 しましまリボン素材追加 サイズ違いあります。 音符のチャーム素材追加 サイズ違いあります。 木目の背景素材 2追加 色違いあります。 レースの背景素材追加 縦横・サイズ違いあります。 花柄レースの背景素材追加 縦横・サイズ違いあります。 トランペットのチャーム素材追加 サイズ違いあります
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
