このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
image-orientation
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2020年4月.
image-orientation はCSS のプロパティで、画像の向きのレイアウトに依存しない修正を指定します。
試してみましょう
image-orientation: none;image-orientation: from-image;<section> <img src="/shared-assets/images/examples/hummingbird.jpg" /></section>#example-element { height: inherit;}構文
/* キーワード値 */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 情報を使用して、画像の向きを適切にします。
警告:image-orientation: none; はセキュリティ上の懸念により、EXIF 情報でエンコードされた安全でないオリジン画像の向きを上書きしません。 詳細は、この CSS 作業グループ草案課題をご覧ください。
解説
このプロパティは、回転したカメラで撮影された画像の方向を修正するためだけを目的としています。自由に回転させるために使用するべきではありません。撮影やスキャンで回転してしまった画像の向きを修正する以外の用途の場合は、transform プロパティにrotate キーワードを付けて回転を指定してください。これはユーザーによる画像の向きの変更や、印刷時に縦向きと横向きを変更する必要がある場合も含みます。
<transform-function> などの他の CSS プロパティとの組み合わせで使用された場合、image-orientation による回転は、常に他の変形が行われる前に適用されます。
公式定義
| 初期値 | from-image |
|---|---|
| 適用対象 | すべての要素 |
| 継承 | あり |
| 計算値 | 0deg から次の 4 分の 1 回転に丸めて正規化した<angle> を1turn で割った余り |
| アニメーションの種類 | 離散値 |
形式文法
image-orientation =
from-image|
none|
[<angle>||flip]
例
画像データから画像の向きを変更
以下の画像は 180 度回転しており、image-orientation プロパティを使用して、画像内の EXIF データに基づいて向きを修正しています。image-orientation をnone に変更すると、このプロパティの効果を見ることができます。
CSS
#image { image-orientation: from-image; /* ライブサンプルの中で変更することができます */}img { margin: 0.5rem 0;}label { font-family: monospace;}<img src="oriole.jpg" alt="Orientation taken from the image" /><div> <input type="radio" name="orientation" value="from-image" checked /> <label for="from-image">from-image</label></div><div> <input type="radio" name="orientation" value="none" /> <label for="none">none</label></div>document.addEventListener("change", (evt) => { document.getElementById("image").style.imageOrientation = evt.target.value;});結果
仕様書
| Specification |
|---|
| CSS Images Module Level 3 # the-image-orientation |
ブラウザーの互換性
関連情報
- その他の画像関連 CSS プロパティ:
object-fit,object-position,image-rendering,image-resolution transformおよびrotate