image-orientation
image-orientation
は CSS のプロパティで、画像の向きのレイアウトに依存しない修正を指定します。
css
/* キーワード値 */
image-orientation: none;
image-orientation: from-image; /* 画像の EXIF データを使用 */
/* グローバル値 */
image-orientation: inherit;
image-orientation: initial;
image-orientation: revert;
image-orientation: revert-layer;
image-orientation: unset;
構文
値
none
-
既定の初期値です。追加の画像の回転を適用しません。画像はエンコードされた方向、または他の CSS プロパティの値で決められた方向になります。
from-image
-
画像に含まれている EXIF 情報を使用して、画像の向きを適切にします。
解説
このプロパティは、回転したカメラで撮影された画像の方向を修正するためだけを目的としています。自由に回転させるために使用するべきではありません。撮影やスキャンで回転してしまった画像の向きを修正する以外の用途の場合は、transform
プロパティに rotate
キーワードを付けて回転を指定してください。これはユーザーによる画像の向きの変更や、印刷時に縦向きと横向きを変更する必要がある場合も含みます。
<transform-function>
などの他の CSS プロパティとの組み合わせで使用された場合、 image-orientation
による回転は、常に他の変形が行われる前に適用されます。
公式定義
形式文法
例
画像データから画像の向きを変更
以下の画像は 180 度回転しており、 image-orientation
プロパティを使用して、画像内の EXIF データに基づいて向きを修正しています。 image-orientation
を none
に変更すると、このプロパティの効果を見ることができます。
CSS
css
#image {
image-orientation: from-image; /* ライブサンプルの中で変更することができます */
}
結果
仕様書
Specification |
---|
CSS Images Module Level 3 # the-image-orientation |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- その他の画像関連 CSS プロパティ:
object-fit
,object-position
,image-orientation
,image-rendering
,image-resolution
transform
およびrotate