image-orientation:横向きや逆さまに撮影された写真を正しい向きに回転させる
初期値 | from-image |
適用対象 | 全ての要素 |
継承 | する |
アニメーション | 離散値 |
対応ブラウザ | caniuseで確認 |
image-orientationプロパティの説明
image-orientation
は、横向きや逆さまに撮影して保存された画像を、Exif情報を使用して正しい向きに回転させる用途で使用します。
このプロパティは、撮影やスキャンで意図せず回転してしまった画像を、本来の向きに直したい時に指定するものです。単純に画像を回転させる効果が欲しい時は、transform
プロパティの採用を推奨します。
image-orientation
を用いて要素を回転させた場合、画像の幅と高さは回転させた後の寸法が基準となります。背景などを設定している場合は、その背景ごと回転されます。つまり元からその角度で作成された画像として扱いたい場合に有効です。
Exif情報とは、スマートフォンやデジタル一眼で撮影したJPEG画像に含まれるメタ情報で、image-orientation
は、そこに含まれる回転(Orientation)情報を参照する機能を表しています。
image-orientationに指定できる値
- none
- 回転を加えません。これが初期値です。
- from-image
- 画像に含まれている
EXIF
情報を使用して、画像の向きを適切なものにします。
image-orientationの使い方とサンプル
image-orientation
プロパティの構文は以下の通りです。
CSS
/* キーワード値 */
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画像だけです。そこに画像方向を示すデータがある場合は、そのデータに従って画像が回転します。
表示確認
CSS
.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;
}
HTML
<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>
image-orientationに関連するCSSプロパティ
要素の表示や配置方法 | |
---|---|
bottom | 位置指定で配置された要素の底辺からの距離を指定する |
break-after | ボックスの終了時にページやカラムをどのように区切るかを指定する |
break-before | ボックスの開始前にページやカラムをどのように区切るかを指定する |
break-inside | ボックスの途中でページやカラムをどのように区切るかを指定する |
clear | フロート(float)の回り込みを解除する |
clip | 要素を切り抜いて可視化する範囲を指定する |
box-decoration-break | 要素の断片が複数の行やページに渡る場合に装飾の表示の仕方を指定する |
display | 要素の表示形式を指定する |
float | 要素を右または左へ寄せて配置する |
image-orientation | 横向きや逆さまに撮影された写真を正しい向きに回転させる |
image-rendering | 画像を拡大縮小するアルゴリズムを設定する |
left | 位置指定で配置された要素の左辺からの距離を指定する |
object-fit | 画像や動画などの置換要素をボックスに収める方法を指定する |
object-position | ボックスの中に配置されるオブジェクトの位置を指定する |
overflow | 要素からはみ出した内容の表示方法をまとめて指定する |
overflow-wrap | インライン要素に対して溢れる単語の折り返し方法を指定する |
overflow-x | 要素から水平方向にはみ出す内容の表示方法を指定する |
overflow-y | 要素から垂直方向にはみ出す内容の表示方法を指定する |
position | 要素の位置指定の種類を変更する |
right | 位置指定で配置された要素の右辺からの距離を指定する |
vertical-align | インライン要素や表のセルに対して縦方向の揃える位置を指定する |
visibility | 要素の領域を残したまま表示・非表示を切り替える |
z-index | 要素の重なり順序を指定する |