CSSのみで画像をトリミングする方法が超便利!

2017.12.18 HTML/CSS
CSSのみで画像をトリミングする方法が超便利!

ブログのサムネイルなど、画像を一覧表示させるときはサイズが統一されていると、きれいに整った印象になります。しかし、Photoshopなどの画像編集ソフトがない環境では、いちいち画像をリサイズするのも現実的ではありません。

ということで今回は、サイズやアスペクト比(縦横比)がバラバラの画像をCSSでトリミングする方法のメモ。縦・横・中央それぞれに合わせてトリミングする方法と、トリミングせずにリサイズする方法があるので、ケースバイケースで使い分けるとよいかと。

参考ページ:CSSだけで画像トリミングできたよ | Tips Note by TAM

中央配置してはみ出た部分を隠す

縦・横・中央、何を基準にするにしても、基本的には「中央配置してはみ出た部分を隠す」形でトリミングしています。

中央配置というとpositionとmarginによる指定が一般的ですが、参考ページで紹介されているようにmarginでは画像ごとに数値を指定する必要があるため、今回の場合は不向きです。

そこでmarginの代わりに、transformプロパティを使用します。

要素を変形させるtransformプロパティ

transformプロパティは要素を変形させるためのプロパティで、要素を移動させたり回転させたり拡大・縮小させたりといった指定ができます。

marginの代わりにこのtransformを使うことで、個別に数値を指定しなくても中央配置ができるようになります。

参考ページ:transform:translate()-CSS3リファレンス

親要素にpositionプロパティを忘れずに

トリミングしたいサイズでブロック要素(親要素)を用意し、その中に中央配置した画像のはみ出た部分をoverflow: hidden;で隠します。

画像の配置にはpositionプロパティを使用するので、親要素にもpositionプロパティを忘れずに指定しておきましょう。

/* トリミングしたいサイズで枠を作る */
.thumb {
  width: 200px;
  height: 200px;
  position: relative;
  overflow: hidden;
}

縦に合わせてトリミング

個人的に一番使いやすいと思っている、縦サイズに合わせてトリミングする方法です。

サムネイルなどに使用される画像は横長のモノが多いと思いますので、縦基準でトリミングすれば変な余白が空くことはありません。

縦を基準にするため、height:100%;、width:auto;を指定します。

/* トリミングしたいサイズで枠を作る */
.thumb {
  width: 200px;
  height: 200px;
  position: relative;
  overflow: hidden;
}

/* 縦に合わせてトリミング */
.thumb 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%;
}

横幅に合わせてトリミング

横幅を基準にトリミングする方法です。なので、正方形の枠に横長の画像をはめ込むと上下に余白ができます。好みの問題ですが、僕はあまり好きではない。

/* トリミングしたいサイズで枠を作る */
.thumb {
  width: 200px;
  height: 200px;
  position: relative;
  overflow: hidden;
}

/* 横幅に合わせてトリミング */
.thumb 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;
}

中央に合わせてトリミング

画像をリサイズせずに中央に配置して、はみ出た部分をトリミングする方法です。

リサイズしないため、大きな画像をはめ込むと見づらかったり、小さい画像だと上下または左右に余白が空くことも。使いどころに注意が必要ですが、ある程度元画像のサイズが統一されている場合には便利かもです。

/* トリミングしたいサイズで枠を作る */
.thumb {
  width: 200px;
  height: 200px;
  position: relative;
  overflow: hidden;
}

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

トリミングせずにリサイズ

トリミングはせず、縦・横どちらかを基準に枠内に画像を全表示させる方法です。

そのため、枠となる親要素の縦横比(アスペクト比)と元画像の比率が違う場合は必ず余白ができます。

/* トリミングしたいサイズで枠を作る */
.thumb {
  width: 200px;
  height: 200px;
  position: relative;
  overflow: hidden;
}

/* トリミングせずにリサイズ */
.thumb img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

うまくいかないときはimgのサイズ指定を確認

上記の指定をしてもうまくトリミングできないときは、他のところでimgにサイズを指定している可能性があります。

たとえば、縦を基準にトリミングする場合に他でwidth:100%を指定していると、意図通りの表示になりません。

そんなときはmax-width:initial;などで、サイズの指定をリセットしてあげるといいかもしれません。

/* トリミングしたいサイズで枠を作る */
.thumb {
  width: 200px;
  height: 200px;
  position: relative;
  overflow: hidden;
}

/* 縦に合わせてトリミング */
.thumb img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  max-width: initial; /* サイズ指定をリセット! */
  width: auto;
  height: 100%;
}

まとめ

以上、CSSで画像をトリミングする方法でした。

なお、object-fitというプロパティを使えば今回紹介したようなトリミングを簡単に行うことができますが、残念ながらIEとEdgeで対応していません(2017年12月現在)。

しかし、object-fit-imagesというJSプラグインを使えばIEなどでも対応させることができるようですので、試してみてもいいかもしれません。

【追記】

object-fit-imagesの使い方について書きました。→object-fitとobject-positionで画像をトリミングする方法(IE・Edge対応)

WordPressテーマ『HIGHLAND』公開しました

WordPressテーマ『HIGHLAND』を公開しました

このブログで紹介しているカスタマイズを、これでもかと盛り込んだ高性能なテーマになっております。商用・非商用問わず無料、是非ご利用ください。

柴田竹思

柴田竹思

日本&ベトナム二拠点生活中のWeb系フリーランス。最近は育児6:仕事4のバランスで生活してます。これでもかってくらい奥さんの尻に敷かれてる座布団系男子です。

プロフィールはこちら