属性名 | image-orientation |
---|---|
値 | from-image | none | [ <angle> || flip ] |
初期値 | from-image |
適用可能要素 | 画像 |
継承 | する |
サポート | https://caniuse.com/?search=image-orientation |
ブラウザは画像を読み込む際に通常、画像ファイルに埋め込まれた Exif データにより画像の回転・反転を補正して表示します。image-orientation はその挙動を制御します。Chrome ではローカルフォルダにある画像や、他サイトの画像に対しては無効のようです。
値 | 説明 |
---|---|
from-image | 画像の Exif データに従って回転・反転を補正します。 |
none | 回転・反転を補正しません。 |
<angle> | 角度を指定します。あまりサポートされていません。 |
flip | 角度分回転した後に反転させます。あまりサポートされていません。 |
90度回転している画像です。何も指定しない場合 Exif データにより適切に回転・反転補正されます。none を指定すると補正されません。from-image は何も指定しない場合と同様です。
img { width: 10rem; } .none { image-orientation: none; } .from-image { image-orientation: from-image; }
<img alt="test" src="image-orientation-test.jpg"> <img alt="test" class="none" src="image-orientation-test.jpg"> <img alt="test" class="from-image" src="image-orientation-test.jpg">