• Facebook
  • Twitter
  • RSS
月別
コツコツあつめるWeb作りのためのたね たねっぱ!Web系情報ブログ Webのお役立ちネタ配信中!

CSSだけで画像をトリミングする方法

投稿者アイコン
2019/08/19
書いた人:
rurippa!
カテゴリ:
CSS
541 views

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

CSSだけで画像をトリミングする方法

目次

はじめに

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

今回使う写真はこちらです。

trimming_css_img01
		<div class="photoWrap">
			<img src="http://placekitten.com/310/210" alt="" width="310" height="210" />
		</div>
		

トリミングのやり方

trimming_css_explainimg

画像の赤い枠のサイズと位置を決めて、その枠より外側にある部分は、overflow:hidden;で非表示にします。
では、実際に例を紹介していきます。

ベースのCSS

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

任意の場所でトリミングする

画像(imgタグ)に対して、positionの数値を変えることで、トリミング位置も変わります。

画像の中央

trimming_css_img_center

trimming_css_img01

    .photoWrap img{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      height: 100%;
      width: auto;
    }
		

画像の左上

trimming_css_img_hidariue

trimming_css_img01

    .photoWrap img{
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: auto;
    }
    

画像の左上、かつ左から30px

trimming_css_img_hidariue30

trimming_css_img01

		.photoWrap img{
  		position: absolute;
  		top: 0;
  		left: -30px;
      height: 100%;
      width: auto;
  	}
		

画像のサイズに合わせてトリミングする

画像のたて、もしくはよこ どちらか一辺を基準にして、トリミングします。

横幅にあわせる

trimming_css_img_yoko

trimming_css_img01

    .photoWrap img{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);

      width: 100%;
      height: auto;
    }
    

高さにあわせる

trimming_css_img_takasa01

trimming_css_img01

    .photoWrap img{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);

      width: auto;
      height: 100%;
    }
    

高さにあわせる(縦長の画像の場合)

trimming_css_img_takasa02

trimming_css_img01

    .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


この記事を読んだ人はこんな記事も読んでいます