image-orientation：横向きや逆さまに撮影された写真を正しい向きに回転させる

image-orientationプロパティの説明

image-orientationは、横向きや逆さまに撮影して保存された画像を、Exif情報を使用して正しい向きに回転させる用途で使用します。

このプロパティは、撮影やスキャンで意図せず回転してしまった画像を、本来の向きに直したい時に指定するものです。単純に画像を回転させる効果が欲しい時は、transformプロパティの採用を推奨します。

image-orientationを用いて要素を回転させた場合、画像の幅と高さは回転させた後の寸法が基準となります。背景などを設定している場合は、その背景ごと回転されます。つまり元からその角度で作成された画像として扱いたい場合に有効です。

Exif情報とは、スマートフォンやデジタル一眼で撮影したJPEG画像に含まれるメタ情報で、image-orientationは、そこに含まれる回転（Orientation）情報を参照する機能を表しています。

image-orientationに指定できる値

none

回転を加えません。これが初期値です。

from-image

画像に含まれているEXIF情報を使用して、画像の向きを適切なものにします。

image-orientationの使い方とサンプル

image-orientationプロパティの構文は以下の通りです。

/* キーワード値 */
image-orientation: none;
image-orientation: from-image;

/* グローバル値 */
image-orientation: inherit;
image-orientation: initial;
image-orientation: revert;
image-orientation: revert-layer;
image-orientation: unset;

image-orientationの実例

それでは実際にimage-orientationプロパティの書き方を見ていきましょう。以下のサンプルではマークアップの方法だけを参考にして下さい。これが適用されるのは、本来Exif情報を持ったJPEG画像だけです。そこに画像方向を示すデータがある場合は、そのデータに従って画像が回転します。

.samp_box {
	overflow: auto;
	padding: 1rem;
	background: #eee;
	display: grid;
	grid-template: 1fr / 1fr 1fr;
}
.samp_box > div {
	padding: .5rem;
	background: #fff;
}
.samp_box h2 {
	margin: 1rem 0 0;
	font-size: 1rem;
}
.samp_box img {
	width: 100%;
	height: auto;
}
.io_none img {
	image-orientation: none;
}
.io_fi img {
	image-orientation: from-image;
}

<div class="samp_box">
	<div class="io_none">
		<h2>image-orientation: none;</h2>
		<img src="../images/sample_photo_628x370.png">
	</div>
	<div class="io_fi">
		<h2>image-orientation: from-image;</h2>
		<img src="../images/sample_photo_628x370.png">
	</div>
</div>