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%; lef