【PR】を含みます。

フロントエンド

【CSS】画像をトリミングする方法

画像トリミング

CSSのみで画像トリミングを行う方法を紹介します。サムネイル画像のサイズがバラバラでも、奇麗に整えることができます。

内接トリミング(内接リサイズ)・外接トリミング(外接リサイズ)とは

内接トリミング(内接リサイズ)

内接トリミング(内接リサイズ)は、画像内の対象や領域に外接する矩形（内接矩形）を計算し、その矩形内の領域を画像から切り取る手法です。

以下の画像のように、画像全体が「.photo-box」の枠内に収まるように調整されます。

内接トリミング(内接リサイズ)説明画像

外接トリミング(外接リサイズ)

外接トリミング(外接リサイズ)は、画像内の対象や領域を包括する最小の矩形（外接矩形）を計算し、その矩形で画像をトリミング（切り取る）する手法です。

以下の画像のように、短辺が「.photo-box」の枠に収まるように調整され、「.photo-box」の枠からはみ出した部分は切り取られます。

外接トリミング(外接リサイズ)説明画像

【サンプル】横長画像の内接トリミングと外接トリミング

以下の横長画像を正方形の枠で内接トリミングと外接トリミングしてみます。

横長サンプル画像
内接トリミング
横長サンプル画像
外接トリミング
横長サンプル画像

【サンプル】縦長画像の内接トリミングと外接トリミング

以下の縦長画像を正方形の枠で内接トリミングと外接トリミングしてみます。

縦長サンプル画像
内接トリミング
縦長サンプル画像
外接トリミング
縦長サンプル画像

【実装コード】内接トリミング(内接リサイズ) HTML・CSS

HTML
Copy
  1. <div class="photo-box -inscribed">
  2.   <img src="image URL" alt="サンプル">
  3. </div>
CSS
Copy
  1. .photo-box {
  2.   box-sizing: border-box;
  3.   width: 300px;
  4.   height: 300px;
  5.   display: flex;
  6.   justify-content: center;
  7.   align-items: center;
  8.   border: solid 2px #ccc;
  9. }
  11. .photo-box img {
  12.   vertical-align: top;
  13. }
  15. .photo-box.-inscribed img {
  16.   width: 100%;
  17.   height: 100%;
  18.   object-fit: contain;
  19. }

【実装コード】外接トリミング(外接リサイズ) HTML・CSS

HTML
Copy
  1. <div class="photo-box -circumscribed">
  2.   <img src="image URL" alt="サンプル">
  3. </div>
CSS
Copy
  1. .photo-box {
  2.   box-sizing: border-box;
  3.   width: 300px;
  4.   height: 300px;
  5.   display: flex;
  6.   justify-content: center;
  7.   align-items: center;
  8.   border: solid 2px #ccc;
  9. }
  11. .photo-box img {
  12.   vertical-align: top;
  13. }
  15. .photo-box.-circumscribed img {
  16.   width: 100%;
  17.   height: 100%;
  18.   object-fit: cover;
  19. }

HTML・CSS入門におすすめの1冊

アイコン画像

もみじ

Web製作未経験でも読みやすい構成で、初学者でも安心して学習することができます。

実践的な内容を学ぶことができ解説も丁寧で分かりやすく、基礎的な内容はこの1冊で学ぶことができます。

-フロントエンド
-