CSSで画像をトリミングする方法を解説!

WEBサイトのコーディングやその修正で何度もPhotoshopなどを使って画像のトリミングをおこなうのは大変ですよね・・・そこで、今回はCSSで画像をトリミングする方法を解説します!サンプルコードも用意しているので皆さんもぜひ挑戦してみてください!

コンテンツ [表示]

  1. 1CSSで画像をトリミングしたい
  2. 2overflowプロパティを使ってトリミングをする方法
  3. 2.1横幅に合わせてトリミング
  4. 2.2高さに合わせてトリミング
  5. 2.3中央に合わせてトリミング
  6. 2.4トリミングせずにリサイズする
  7. 3object-fitプロパティを使ってトリミングをする方法
  8. 3.1画像を中央の位置でトリミングする
  9. 3.2画像を任意の位置でトリミングする
  10. 3.3トリミングせずに余白を表示する
  11. 3.4object-fitプロパティで使える値
  12. 4まとめ

CSSで画像をトリミングしたい

CSSで画像をトリミングする方法を解説します!
毎回、面倒なトリミング作業や画像のレスポンシブもCSSなので簡単に設定できます!

その他にもWordpPressなどのCMSでクライアントが写真を更新する箇所でも、
写真がはみ出したり、切り抜きをしなくてもレイアウトが崩れることがないのでとっても安心です。

今回は、下のような横に長い画像と縦に長い画像をつかって解説します。

横に長い画像

縦に長い画像

overflowプロパティを使ってトリミングをする方法

この方法は、写真画像の要素をトリミングの枠になる要素で切り抜くようなイメージです。
昔からよく使われていたやり方なのでIE11でも余裕で対応しており、transformプロパティが使えるブラウザであれば実装が可能です。

基本となるHTML構造は下のようになります。

【HTML】overflowプロパティを使ってトリミングをする方法

<div class="trim">
    <img src="../imgs/cat.jpg" alt="写真:猫">
</div>
<div class="trim">
    <img src="../imgs/dog.jpg" alt="写真:犬">
</div>

トリミングする枠の要素となる.trimの共通CSSは下となります。

【CSS】overflowプロパティを使ってトリミングをする方法

/* トリミングしたい親要素 */
.trim {
	position: relative;
	overflow: hidden;
	width: 50%; /* トリミングしたい枠の幅 */
	height: 100vh; /* トリミングしたい枠の高さ */
}

.trimには、overflow: hidden;を指定して、この要素の範囲からはみ出す要素は非表示にします。
また、写真画像の要素は上下中央にする必要があるので、併せてposition: relative;を指定します。

幅や高さについては、適宜設定してください。

img要素のCSSの指定は、写真をどのように設定したいかによって変わります。
それでは、サンプルコードと共に見ていきましょう!

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

縦横比を保持し、ボックスに収まるようにリサイズされます。
img要素の横幅に合わせて比率を保持してボックスにフィットさせます。

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

/* トリミングしたいイメージ要素 */
.trim img {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 100%;
	height: auto;
}

高さに合わせてトリミング

縦横比を保持し、ボックスに収まるようにリサイズされます。
img要素の縦幅に合わせて比率を保持してボックスにフィットさせます。

【CSS】高さに合わせてトリミング

/* トリミングしたいイメージ要素 */
.trim img {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: auto;
	height: 100%;
}

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

縦横比を保持し、ボックスに収まるよう表示させます。
リサイズはされません。

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

/* トリミングしたいイメージ要素 */
.trim img {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

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

img要素を中央にして、縦幅と横幅の大きい方をサイズに合わせて比率を保持し表示させる方法です。
例外ですが、こちらはトリミングはせずに画像全体を表示させたい時に利用するよいでしょう。

【CSS】トリミングせずにリサイズする

/* トリミングしたいイメージ要素 */
.trim img {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
}

object-fitプロパティを使ってトリミングをする方法

この方法は、現在最も簡単にトリミングができ、レスポンシブにも適応しやすい方法だと思います。
残念ながらIEは対応していませんが、下のブラウザであれば対応が可能です。

あわせて読みたい
object-fit
CSSのobject-fitプロパティはボックスの中の画像や動画をどのようにサイズ調整してはめ込むか制御するプロパティです。object-fitプロパティの構文や使い方をサンプルコード付きで解説します。

それでは、基本的なプロパティの使い方から見ていきましょう!

画像を中央の位置でトリミングする

HTML構造は下のようになります。

【HTML】画像を中央の位置でトリミングする

<div class="d-flex">
    <img src="../imgs/cat.jpg" alt="写真:猫">
    <img class="object-fit-cover" src="../imgs/cat.jpg" alt="写真:猫">
</div>
<div class="d-flex">
    <img src="../imgs/dog.jpg" alt="写真:犬">
    <img class="object-fit-cover" src="../imgs/dog.jpg" alt="写真:犬">
</div>

今回は分かりやすいように、object-fitプロパティを使ったものとそうでないものを表示したいと思います。
そのため、.object-fit-coverとついたものは、このプロパティを設定したものとします。

【CSS】画像を中央の位置でトリミングする

/* トリミングしたいイメージ要素 */
img {
	width: 50%; /* トリミングしたい枠の幅 */
	height: 50vh; /* トリミングしたい枠の高さ */
}
.object-fit-cover {
	object-fit: cover;
}

.object-fit-coverに対して、object-fit: cover;を設定します。
coverの値を設定することによって、img要素で指定した大きさにトリミングがおこなわれます。

background-sizeプロパティをイメージすると分かりやすいですね!
驚くことに「overflowプロパティを使ってトリミングをする方法」のCSSの記述の半分もありませんのでとっても簡単です。

左の画像が通常のもので、右の画像がobject-fit: cover;を設定した画像です。
左はimg要素で指定した大きさに合わせるために、つぶれて表示されてしまいます。

ですが、右の画像は、object-fit: cover;が指定されているので、まるで要素に合わせた切り抜き画像のように綺麗に表示されています。
このように、object-fit: cover;を使えば縦横のうち小さい方を基準にして自動的に拡大・縮小され、ボックスからはみ出した部分は自動でトリミングされます。

画像を任意の位置でトリミングする

object-positionプロパティを使って写真の位置を調整する方法のご紹介です。
引き続き、トリミングしたい要素には、object-fit: cover;を使います。

【HTML】画像を任意の位置でトリミングする

<div class="d-flex">
    <img class="object-fit-cover position-left-top" src="../imgs/cat.jpg" alt="写真:猫">
    <img class="object-fit-cover position-right-bottom" src="../imgs/cat.jpg" alt="写真:猫">
</div>
<div class="d-flex">
    <img class="object-fit-cover position-center" src="../imgs/dog.jpg" alt="写真:犬">
    <img class="object-fit-cover position-custom" src="../imgs/dog.jpg" alt="写真:犬">
</div>

【CSS】画像を任意の位置でトリミングする

/* トリミングしたいイメージ要素 */
img {
	width: 50%; /* トリミングしたい枠の幅 */
	height: 50vh; /* トリミングしたい枠の高さ */
}
.object-fit-cover {
	object-fit: cover;
}
/* トリミングしたい位置を指定する */
.position-left-top {
	object-position: left top;
}
.position-right-bottom {
	object-position: right bottom;
}
.position-center {
	object-position: center;
}
.position-custom {
	object-position: 20px 100%;
}
あわせて読みたい
object-position
CSSのobject-positionプロパティはボックス内の画像や動画などの表示位置を制御するプロパティです。object-positionプロパティの構文や使い方についてサンプルコード付きで解説します。

object-positionプロパティでは、leftrightなどはもちろん、%pxの単位指定も利用可能です。
こちらもbackground-positionプロパティをイメージすると分かりやすいですね!

トリミングせずに余白を表示する

縦幅と横幅の大きい方をサイズに合わせて比率を保持し表示させる方法です。
例外ですが、こちらはトリミングはせずに画像全体を表示させたい時に利用するよいでしょう。
前項で解説した「トリミングせずにリサイズする」と同様です。

【HTML】トリミングせずに余白を表示する

<div class="d-flex">
    <img class="object-fit-contain" src="../imgs/cat.jpg" alt="写真:猫">
    <img class="object-fit-contain" src="../imgs/dog.jpg" alt="写真:犬">
</div>

【CSS】トリミングせずに余白を表示する

/* トリミングしたいイメージ要素 */
img {
	width: 50%; /* トリミングしたい枠の幅 */
	height: 100vh; /* トリミングしたい枠の高さ */
}
.object-fit-contain {
	object-fit: contain;
}

object-fitプロパティの値をcontainにします。
こちらもbackground-positionプロパティをイメージするととても分かりやすいですね!

object-fitプロパティで使える値

object-fitプロパティには、今回詳しく紹介したcovercontain以外にも使える値があります。
下に一覧表を作成しましたので必要に応じて使い分けてみてください!

説明
fill(初期値) ボックス内を満たすように縦横比を変えながらリサイズされます。
cover 縦横比を保持してボックスを完全に覆うようリサイズされます。縦横のうち小さい方を基準にして自動的にリサイズし、ボックスからはみ出した部分はトリミングされます。
contain 縦横比を保持し、ボックスに収まるようにリサイズされます。幅と高さのうち大きい方のサイズに合わせて比率を保持してボックスにフィットさせます。
none リサイズせず、そのまま表示します。
scale-down noneとcontainのうち、小さい方のサイズに合わせて表示します。

【HTML】object-fitプロパティで使える値

<figure>
    <img class="object-fit-fill" src="../imgs/cat.jpg" alt="写真:猫">
    <figcaption>fill(初期値)</figcaption>
</figure>
<figure>
    <img class="object-fit-cover" src="../imgs/cat.jpg" alt="写真:猫">
    <figcaption>cover</figcaption>
</figure>
<figure>
    <img class="object-fit-contain" src="../imgs/cat.jpg" alt="写真:猫">
    <figcaption>contain</figcaption>
</figure>
<figure>
    <img class="object-fit-none" src="../imgs/cat.jpg" alt="写真:猫">
    <figcaption>none</figcaption>
</figure>
<figure>
    <img class="object-fit-scale-down" src="../imgs/cat.jpg" alt="写真:猫">
    <figcaption>scale-down</figcaption>
</figure>

【CSS】object-fitプロパティで使える値

/* トリミングしたいイメージ要素 */
img {
	width: 100%; /* トリミングしたい枠の幅 */
	height: 50vh; /* トリミングしたい枠の高さ */
}
.object-fit-fill {
	object-fit: fill;
}
.object-fit-cover {
	object-fit: cover;
}
.object-fit-contain {
	object-fit: contain;
}
.object-fit-none {
	object-fit: none;
}
.object-fit-scale-down {
	object-fit: scale-down;
}

まとめ

今回は、CSSを使った画像をトリミングする方法を解説しました!

同じようなやり方でも、それぞれ実現させたい条件やブラウザの対応状況でたくさんの方法があります。

もちろん、今回ご紹介した方法以外にもありますので、
ぜひ、みなさんも自分のベストコードを探してみてください!

今だけ
無料

【7月31日まで】全カリキュラム無料で提供中!

Qumeru

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを7月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事