CSSだけで画像をトリミングする方法3つとjQueryを使う方法1つ | Cappee Design
@cappeeです。 特にシステム案件のコーディングだと、縦横比が異なる画像を扱う場合も多いと思います。 例えばユーザー画像などを正方形で表示したい場合、アップされる元画像はユーザに委ねられるので画像のサイズや縦横比は様々になると思います。アップしたタイミングで画像を加工できるならいいですが、そうでない場合、見た目を整えるためにCSSで同じサイズにトリミングしてしまいましょう。 トリミングにもCSSだけで3つのやり方があるので、状況によって使い分けたいですね。 overflow: hidden を使う 一番オーソドックスなやり方がoverflow: hidden を使ってトリミングする方法です。 trimming というクラス名が入ったトリミングする枠用のタグはブロック要素である必要がありますので、もしインライン要素に指定する場合は、CSSに display: block; も追加してく
画像編集いらず！jQueryとCSSだけで画像をトリミング＆センタリングする | ホームページ制作・開発／大阪｜アルカナワークス
商品画像の一覧を作成したいとか、トップページにブログ内の画像を固定サイズにトリミングして表示したい。 そんな時に元画像を変更せずにCSSとｊQueryだけで自動的にトリミング＆センタリングする方法をご紹介します。 システムで自動的に商品一覧を表示しているときや、 Wordpressなどで登録するときに、画像を編集してトリミングとか難しいことができない、 といった時に便利に使えます。 CSSでのトリミングはもともとこのサイトで紹介されていたのですが CSS GLOBE – Create Resizing Thumbnails Using Overflow Property こちらはCSSだけでの方法なので、画像をセンタリングするには1つ1つ調整するか、 元の画像を決められたサイズにしなくてはいけませんでした。 そこで、追加でｊQueryで、画像をセンタリングるものを組み合わせてみまし
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
