【CSS Modules】image-orientationプロパティの使い方

image-orientationプロパティは、画像の表示向きを制御するプロパティです。デジタルカメラやスマートフォンで撮影された写真には、Exif（Exchangeable image file format）と呼ばれるメタデータに画像の向きに関する情報が含まれていることがあります。ウェブブラウザは通常、このExifデータに基づいて画像を自動的に正しい向きに調整して表示しますが、このプロパティを使用することで、その挙動を細かく制御できます。

このプロパティの主な値には、「from-image」と「none」があります。「from-image」は初期値であり、画像に含まれるExifデータから向き情報を読み取り、その情報に基づいて画像を自動的に正しい向きに回転させて表示します。これにより、例えば縦向きに撮影された写真がブラウザで横向きに表示されてしまうといった問題を解決できます。「none」を指定した場合、Exifデータに含まれる向き情報は無視され、画像データが元々持っている向きのまま表示されます。これは、意図的に画像の向きを調整したくない場合や、特定のデザイン要件がある場合に有用です。

また、特定の角度を指定して画像を回転させることも可能です。例えば「90deg」と指定すると、画像を時計回りに90度回転させて表示できます。image-orientationプロパティは、画像の表示向きのずれを修正したり、ウェブページ上で画像を意図した角度で表示させたりする際に非常に役立つツールです。初心者の方も、画像が意図した向きで表示されない場合に、まずこのプロパティの存在を思い出してください。

Copy
1image-orientation: from-image;

引数なし

引数はありません

戻り値なし

戻り値はありません