• RSS

[JS]jQuery とCSS で画像をトリミングしてセンタリング表示する方法

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

jQuery とCSS で画像をトリミングしてセンタリング表示する方法のご紹介です。

横*高さ 180px の正方形で画像をトリミング

横長(長方形)の画像を、jQuery とCSS で横*高さ180px の正方形にトリミングして表示するサンプルです。

jQuery

var cw = 180var ch = 180 で、それぞれトリミング後の画像の横幅と高さを指定します。

CSS

jQuery 同様、画像の親要素(.trimming)にトリミング後の横幅と高さであるwidth:180pxheight:180px を指定します。

HTML


↓トリミングしたデモはこちらです。
jQuery とCSS で画像をトリミングしてセンタリング表示するデモ




  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください