image-orientationプロパティは、横向きや逆さまの画像を回転させて正しい向きに補正する際に使用します。
カメラを横にして撮影した場合などに、結果として得られる画像が横向きや逆さまになることがあります。
image-orientationプロパティは、そのような向きが適切ではない画像を正しい位置に回転させて補正するためのプロパティです。
image-orientationプロパティは画像の向きを正しい位置に補正するものであり、画像を任意の位置に回転させることが目的ではありません。
そのため、例えば
18度、60度、135度、210度、350度などの中途半端な角度指定をしても、
0度、90度、180度、270度、360度にまるめられて回転が適用されます。
image-orientationプロパティを使用して画像を回転させた場合、
回転前ではなく回転後の画像の高さと幅がその画像の高さと幅となります。
また、画像に背景色などを設定している場合にはその背景ごと回転されます。
つまり、もとから回転後の状態の画像であったかのように扱われるということです。
画像を任意の位置に回転させる目的には、
transformプロパティ
の
transform:rotate()
などを使用してください。
img.sample1 {image-orientation: 0deg;}
img.sample2 {image-orientation: 90deg;}
img.sample3 {image-orientation: 180deg;}
img.sample4 {image-orientation: 270deg;}
img.sample5 {image-orientation: 60deg;}
<p>
image-orientation: 0deg; を指定<br>
<img class=”sample1″ src=”https://htmqcom1.wpengine.com/wp-content/uploads/2024/07/kaeru.gif”>
</p>
<p>
image-orientation: 90deg; を指定<br>
<img class=”sample2″ src=”https://htmqcom1.wpengine.com/wp-content/uploads/2024/07/kaeru.gif”>
</p>
<p>
image-orientation: 180deg; を指定<br>
<img class=”sample3″ src=”https://htmqcom1.wpengine.com/wp-content/uploads/2024/07/kaeru.gif”>
</p>
<p>
image-orientation: 270deg; を指定<br>
<img class=”sample4″ src=”https://htmqcom1.wpengine.com/wp-content/uploads/2024/07/kaeru.gif”>
</p>
<p>
image-orientation: 60deg; を指定<br>
<img class=”sample5″ src=”https://htmqcom1.wpengine.com/wp-content/uploads/2024/07/kaeru.gif”>
</p>
image-orientation: 0deg; を指定
image-orientation: 90deg; を指定
image-orientation: 180deg; を指定
image-orientation: 270deg; を指定
image-orientation: 60deg; を指定
img.prefix_sample1 {
-moz-image-orientation: 0deg;
-webkit-image-orientation: 0deg;
-o-image-orientation: 0deg;
-ms-image-orientation: 0deg;
}
img.prefix_sample2 {
-moz-image-orientation: 90deg;
-webkit-image-orientation: 90deg;
-o-image-orientation: 90deg;
-ms-image-orientation: 90deg;
}
img.prefix_sample3 {
-moz-image-orientation: 180deg;
-webkit-image-orientation: 180deg;
-o-image-orientation: 180deg;
-ms-image-orientation: 180deg;
}
img.prefix_sample4 {
-moz-image-orientation: 270deg;
-webkit-image-orientation: 270deg;
-o-image-orientation: 270deg;
-ms-image-orientation: 270deg;
}
img.prefix_sample5 {
-moz-image-orientation: 60deg;
-webkit-image-orientation: 60deg;
-o-image-orientation: 60deg;
-ms-image-orientation: 60deg;
}
<p>
image-orientation: 0deg; を指定<br>
<img class=”prefix_sample1″ src=”https://htmqcom1.wpengine.com/wp-content/uploads/2024/07/kaeru.gif”>
</p>
<p>
image-orientation: 90deg; を指定<br>
<img class=”prefix_sample2″ src=”https://htmqcom1.wpengine.com/wp-content/uploads/2024/07/kaeru.gif”>
</p>
<p>
image-orientation: 180deg; を指定<br>
<img class=”prefix_sample3″ src=”https://htmqcom1.wpengine.com/wp-content/uploads/2024/07/kaeru.gif”>
</p>
<p>
image-orientation: 270deg; を指定<br>
<img class=”prefix_sample4″ src=”https://htmqcom1.wpengine.com/wp-content/uploads/2024/07/kaeru.gif”>
</p>
<p>
image-orientation: 60deg; を指定<br>
<img class=”prefix_sample5″ src=”https://htmqcom1.wpengine.com/wp-content/uploads/2024/07/kaeru.gif”>
</p>
image-orientation: 0deg; を指定
image-orientation: 90deg; を指定
image-orientation: 180deg; を指定
image-orientation: 270deg; を指定
image-orientation: 60deg; を指定
