[JS]jQuery とCSS で画像をトリミングしてセンタリング表示する方法
スポンサード
スポンサード
jQuery とCSS で画像をトリミングしてセンタリング表示する方法のご紹介です。
目次
横*高さ 180px の正方形で画像をトリミング
横長(長方形)の画像を、jQuery とCSS で横*高さ180px の正方形にトリミングして表示するサンプルです。jQuery
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <script src="./jquery.min.js"></script> <script> $(document).ready(function(){ $(".thumbnail").on("load",function(){ var iw, ih; var cw = 180; var ch = 180; iw = ($(this).width() - cw) / 2; ih = ($(this).height() - ch) / 2; $(this).css("top", "-"+ih+"px"); $(this).css("left", "-"+iw+"px"); }); }); </script> |
var cw = 180
、var ch = 180
で、それぞれトリミング後の画像の横幅と高さを指定します。
CSS
1 2 3 4 5 6 7 8 9 10 11 12 | div.trimming { display:block; width:180px; height:180px; overflow:hidden; position:relative; z-index:1; } div.trimming img.thumbnail { float:left; position:absolute; } |
jQuery 同様、画像の親要素(.trimming)にトリミング後の横幅と高さであるwidth:180px
、height:180px
を指定します。
HTML
1 2 3 | <div class="trimming"> <img src="images.jpg" class="thumbnail"> </div> |
↓トリミングしたデモはこちらです。
jQuery とCSS で画像をトリミングしてセンタリング表示するデモ
スポンサード
コメント