CSS - image-orientation

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

概要

説明

ブラウザは画像を読み込む際に通常、画像ファイルに埋め込まれた Exif データにより画像の回転・反転を補正して表示します。image-orientation はその挙動を制御します。Chrome ではローカルフォルダにある画像や、他サイトの画像に対しては無効のようです。

使用例

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">

リンク

• https://developer.mozilla.org/ja/docs/Web/CSS/image-orientation
• https://drafts.csswg.org/css-images/#the-image-orientation