ec-cube CSSで画像のトリミングをしよう!

Wordpress等で画像をアップする際、サイズを調整するために加工するのって手間でもあるし、
PCに詳しくない人に更新をお願いする場合にはなるべく簡単にしたいですよね。

今回は更新が劇的に楽になる!?CSSで画像をトリミングする方法をご紹介します。

この画像をトリミングします


HTML

<div class="trim">
 <img src="http://awd-web.com/wp/wp-content/uploads/20170608_1.png" alt="" />
</div>


CSS
.trim {
     overflow: hidden;
     width: 200px;
     height: 200px;
     position: relative;
}

画像をdivでくくり、トリミングしたいサイズを設定します。
はみ出た部分はoverflow:hiddenで切り取り。


横幅に合わせてトリミング
CSS
.trim img {
     position: absolute;
     top: 50%;
     left: 50%;
     -webkit-transform: translate(-50%, -50%);
     -ms-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
     width: 100%;
     height: auto;
}

RESULT


高さに合わせてトリミング
CSS
.trim img {
     position: absolute;
     top: 50%;
     left: 50%;
     -webkit-transform: translate(-50%, -50%);
     -ms-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
     width: auto;
     height: 100%;
}

RESULT


中央に合わせてトリミング
CSS
.trim img {
     position: absolute;
     top: 50%;
     left: 50%;
     -webkit-transform: translate(-50%, -50%);
     -ms-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
}

RESULT

サイズの拡大縮小はなしで、純粋に画像をトリミングしたい場合に便利です。

気を付けたいこと
見せたい部分が端っこによっている場合、この方法でトリミングするとそれが見えなくなる場合もあります。
また、使用する画像が縦長だったり横長だったりバラバラだと、
画像が並んだ時に上下左右にスペースができることもあります。
ですので、使用する画像のサイズはできるだけ同じにするといいかもしれません。

とても便利ですので、ぜひお試しくださいv(*´ω`*)