• RSS

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

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

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

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

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

jQuery

<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 = 180var ch = 180 で、それぞれトリミング後の画像の横幅と高さを指定します。

CSS

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:180pxheight:180px を指定します。

HTML

<div class="trimming">
<img src="images.jpg" class="thumbnail">
</div>

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




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

コメント

コメントを残す