CSSだけで画像をトリミングする方法
CSSだけでトリミングをする方法を紹介します。

目次
はじめに
CSSだけでトリミングをする方法を紹介します。
今回使う写真はこちらです。
<div class="photoWrap"> <img src="http://placekitten.com/310/210" alt="" width="310" height="210" /> </div>
トリミングのやり方
画像の赤い枠のサイズと位置を決めて、その枠より外側にある部分は、overflow:hidden;で非表示にします。
では、実際に例を紹介していきます。
ベースのCSS
.photoWrap{ position: relative; overflow: hidden; width: 200px; height: 200px; }
任意の場所でトリミングする
画像(imgタグ)に対して、positionの数値を変えることで、トリミング位置も変わります。
画像の中央
.photoWrap img{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 100%; width: auto; }
画像の左上
.photoWrap img{ position: absolute; top: 0; left: 0; height: 100%; width: auto; }
画像の左上、かつ左から30px
.photoWrap img{ position: absolute; top: 0; left: -30px; height: 100%; width: auto; }
画像のサイズに合わせてトリミングする
画像のたて、もしくはよこ どちらか一辺を基準にして、トリミングします。
横幅にあわせる
.photoWrap img{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: auto; }
高さにあわせる
.photoWrap img{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: auto; height: 100%; }
高さにあわせる(縦長の画像の場合)
.photoWrap img{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: auto; height: 100%; }
最後に
うまくできましたか?
トリミングに関するCSSで、「object-fit」という便利なものもありますが、まだ対応していないブラウザもあるため 今回の記事を書きました。少しでも参考になれば幸いです。