jQueryとCSSで画像をトリミングしてセンタリング表示する方法のご紹介です。
横*高さ180pxの正方形で画像をトリミング
横長(長方形)の画像をjQueryとCSSで横*高さ180pxの正方形にトリミングして表示するサンプルです。jQuery
var cw = 180、var ch = 180で、それぞれトリミング後の画像の横幅と高さを指定します。
CSS
jQuery同様、画像の親要素(.trimming)にトリミング後の横幅と高さであるwidth:180px、height:180pxを指定します。
HTML
↓トリミングしたデモはこちらです。
jQueryとCSSで画像をトリミングしてセンタリング表示するデモ
参考サイト
http://www.arcanaworks.jp/tips/jquery%E3%81%A8css%E3%81%A7%E7%94%BB%E5%83%8F%E3%82%92%E3%83%88%E3%83%AA%E3%83%9F%E3%83%B3%E3%82%B0%E3%81%97%E3%81%A6%E3%82%BB%E3%83%B3%E3%82%BF%E3%83%AA%E3%83%B3%E3%82%B0%E3%81%99%E3%82%8B
コメント