CSS3 image-orientation

CSS property used generally to fix the intended orientation of an image. This can be done using 90 degree increments or based on the image's EXIF data using the "from-image" value.

W3C Candidate Recommendation: https://www.w3.org/TR/css-images-3/#the-image-orientation

Usage: 96% + 0.59% = 96.6%

Support summary

Notes

Opening the image in a new tab in Chrome results in the image shown in the orientation according to the EXIF data.

  1. Partial support in iOS refers to the browser using EXIF data by default, though it does not actually support the property.
  2. Has a bug where the browser is not maintaining the image’s aspect ratio when `object-fit: cover` and `image-orientation: from-image` are used together.

Links

Full support table

IE

5.567891011
nnnnnnn

Edge

121314151617187980818384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124
nnnnnnnnnyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy

Firefox

233.53.6456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128
nnnnnnnnnnnnnnnnnnnnnnnnnnyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy

Chrome

4567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127
nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy

Safari

3.13.2455.166.177.1899.11010.11111.11212.11313.11414.11515.115.2-15.315.415.515.616.016.116.216.316.416.516.617.017.117.217.317.417.5TP
nnnnnnnnnnnnnnnnnnnyyyyyyyyyyyyyyyyyyyyyyy

Opera

99.5-9.610.0-10.110.510.61111.111.511.61212.11516171819202122232425262728293031323334353637383940414243444546474849505152535455565758606263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109
nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy

Safari on iOS

3.24.0-4.14.2-4.35.0-5.16.0-6.17.0-7.188.1-8.49.0-9.29.310.0-10.210.311.0-11.211.3-11.412.0-12.112.2-12.513.0-13.113.213.313.4-13.714.0-14.414.5-14.815.0-15.115.2-15.315.415.515.6-15.816.016.116.216.316.416.516.6-16.717.017.117.217.317.417.5
aaaaaaaaaaaaaaaaaaaayyyyyyyyyyyyyyyyyyyy

Opera Mini

all
n

Android Browser

2.12.22.3344.14.2-4.34.44.4.3-4.4.4124
nnnnnnnnny

Blackberry Browser

710
nn

Opera Mobile

101111.111.51212.180
nnnnnny

Chrome for Android

124
y

Firefox for Android

125
y

IE Mobile

1011
nn

UC Browser for Android

15.5
y

Samsung Internet

45.0-5.46.2-6.47.2-7.48.29.210.111.1-11.212.013.014.015.016.017.018.019.02021222324
nnnnnnnnnyyyyyyyyyyyy

QQ Browser

14.9
n

Baidu Browser

13.52
y

KaiOS Browser

2.53.0-3.1
yy

Back to list

Data copyright caniuse.com