CSS - image-orientation

トップ > CSSリファレンス > image-orientation

概要

属性名 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 は何も指定しない場合と同様です。

CSS
img {
  width: 10rem;
}
.none {
  image-orientation: none;
}
.from-image {
  image-orientation: from-image;
}
HTML
<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">
表示
test test test

リンク


Copyright (C) 2022 杜甫々
初版:2022年7月31日、最終更新:2022年7月31日
http://www.tohoho-web.com/css/prop/image-orientation.htm