cssでimg画像をトリミングする方法「object-fit」編

MARKLEAPS

2021.03.26

Photoshopなどの画像編集ソフトを使わずに、
cssでimg画像をトリミングする方法をご紹介します。

「object-fit」プロパティを使った方法となります。

object-fitプロパティはIE、Eageには未対応です。
IE、Eageにも対応させるにはライブラリを使用する必要があります。
ライブラリを読み込みたくない、という方はcssのみで対応する以下の記事をご覧ください。
img画像をトリミング「transform」編

サイズを指定して画像をトリミング

img {
	width: 300px;
	height: 300px;
	object-fit: cover;
}

img {

width: 300px;

height: 300px;

object-fit: cover;

}

高さを固定し、横幅は画面いっぱいに表示

img {
	width: 100%;
	height: 300px;
	object-fit: cover;
}

img {

width: 100%;

height: 300px;

object-fit: cover;

}

レスポンシブ（枠を可変幅）で表示

<div><img src="img01.jpg"></div>

1	<div><img src="img01.jpg"></div>

div {
	width: 100%;
	overflow: hidden;
	position: relative;
}
div:before {
	content: "";
	display: block;
	padding-top: 100%;
}

div img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

div {

width: 100%;

overflow: hidden;

position: relative;

}

div:before {

content: "";

display: block;

padding-top: 100%;

}

div img {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

object-fit: cover;

}

beforeのpadding-topで画像の縦横比を調整します。
縦横比の計算式は以下になります。

高さ ÷ 幅 × 100

・正方形で画像を表示させたい場合
1÷1×100で100となり、padding-top: 100%;と指定します。

・縦横比16：10で画像を表示させたい場合
10÷16×100＝62.5となり、padding-top: 62.5%;と指定します。

トリミングする画像の位置を指定

「object-position」プロパティを使えば、
トリミングする画像の位置を指定することができます。

・中央でトリミング（初期値）
指定なし

・左上でトリミング

img {
	object-position: 0 0;
}

img {

object-position: 0 0;

}

・左下でトリミング

img {
	object-position: 0 100%;
}

img {

object-position: 0 100%;

}

・右上でトリミング

img {
	object-position: 100% 0;
}

img {

object-position: 100% 0;

}

・右下でトリミング

img {
	object-position: 100% 100%;
}

img {

object-position: 100% 100%;

}

IE、Eageにも対応させる

「object-fit」プロパティはIE、Eageには対応していません。
IE、Eageにも対応させるために、「object-fit-images」ライブラリを使用します。

■ダウンロード
GitHubで公開されているobject-fit-imagesを以下よりダウンロードします。
object-fit-images

■ofi.min.js を読み込む
以下のいずれかの方法で読み込みます。
・zipファイルをダウンロードしてofi.min.jsを読み込む

<scrpt src="js/ofi.min.js"></script>

1	<scrpt src="js/ofi.min.js"></script>

・CDNで読み込む

<script src="https://cdnjs.cloudflare.com/ajax/libs/object-fit-images/3.2.4/ofi.min.js"></script>

1	<script src="https://cdnjs.cloudflare.com/ajax/libs/object-fit-images/3.2.4/ofi.min.js"></script>

■スクリプトの呼び出し・実行

<script>
$(function () {
  objectFitImages()
});
</script>

$(function () {

objectFitImages()

});

</script>

以下のようにクラスを指定して記述すると必要なクラスにのみ処理を実行できます。

<script>
$(function () {
  objectFitImages('.ofi_img')
});
</script>

<img class="ofi_img" src="pic/img01.jpg" alt="" />

$(function () {

objectFitImages('.ofi_img')

});

</script>

■IE、Eage用のCSSを追記

object-fitを使用したいセレクタに「font-family: ‘object-fit: 属性値;’ 」を追加します。

.ofi_img {
	object-fit: cover;
	font-family: 'object-fit: cover;'
}

.ofi_img {

object-fit: cover;

font-family: 'object-fit: cover;'

}

これでIE、Eageでもobject-fitプロパティ機能するようになりました。

CSS

よく読まれている関連記事

CSSアニメーション　2つの機能