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」という便利なものもありますが、まだ対応していないブラウザもあるため 今回の記事を書きました。少しでも参考になれば幸いです。

参考記事

・object-fit – CSS: カスケーディングスタイルシート | MDN

・ Can I use… Support tables for HTML5, CSS3, etc