最終更新日: 2021年2月25日

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

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

コンテンツ [表示]

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は対応していませんが、下のブラウザであれば対応が可能です。

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

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%;
}

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

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

【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プロパティには、今回詳しく紹介したcoverやcontain以外にも使える値があります。
下に一覧表を作成しましたので必要に応じて使い分けてみてください！

値	説明
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を使った画像をトリミングする方法を解説しました！

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

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

CSS
CSSでコメントアウトする方法と書き方を解説！
CSSでコメントアウトする方法と書き方を紹介していきます。CSSのコメントアウトの書き方はHTMLとは異なりますので注意が...
2020年12月19日
CSS
CSSが効かない原因とその対処法を解説！
CSSを更新しても「ブラウザ上でスタイルが効かない！」といった経験は誰しも一度はあります。今回の記事ではCSSが効かない場...
2020年12月19日
CSS
CSSでスタイルが効かない場合の最終手段「!important」の書き方を解説！
CSSで「!important」を記述したスタイルはCSSの優先順位を無視して、強制的に適用されます。今回は「!impor...
2020年12月19日
CSS
CSSのスタイルの優先順位のルールと優先度を上げる方法を解説！
CSSではスタイルの指定が複数あり重複しているときに優先順位を考える必要があります。CSSの優先順位のルールと優先度の上げ...
2020年10月29日
CSS
CSSで見やすいコメントのデザインのおすすめを紹介！
CSSで見やすいコメントの見本となるデザインのパターンを紹介してきます。ぜひ一番見やすいコメントのデザインを採用してみて下さい。
2020年10月29日
CSS
横並びのリストを中央寄せ（センタリング）する方法！
箇条書きなど横並びのリストを中央寄せ（センタリング）する方法を解説します。float・flexbox・inline-blo...
2021年2月2日
CSS
CSSで画像を斜めや平行四辺形にトリミングする方法！
CSSで画像を斜めや平行四辺形でトリミングする方法をサンプルコード付きで解説していきます。CSSで画像を切り抜くやり方を覚...
2021年2月17日
CSS
CSSで画像を丸くトリミングして表示する方法！
CSSで画像を丸くトリミングして表示する方法をサンプルコード付きで紹介します。SNSのプロフィール画像のよおうに四角い画像...
2020年12月28日
CSS
CSSでbrタグの改行を無効化する方法を解説！
CSSでbrタグの改行を無効化する方法を紹介します。レスポンシブデザインなどでPCは改行させたいがスマホは改行させたくない...
2020年11月1日
CSS
CSSのベンダープレフィックスを自動で追加する方法を紹介！
CSSのベンダープレフィックスは「-webkit-」「-moz-」などを手動で付与していくととても手間がかかります。Aut...
2020年10月29日