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: 95.5% + 0.33% = 95.8%

Support summary

IE: Not supported
Edge: 89, notes for version 81₂
Firefox: 26
Chrome: 89, notes for version 81₂
Safari: 13.1
Opera: 77, notes for version 68₂
Safari on iOS: 13.4-13.7, partial since 3.2, notes for version 3.2₁
Opera Mini: Not supported
Android Browser: 143
Blackberry Browser: Not supported
Opera Mobile: 80
Chrome for Android: 143
Firefox for Android: 146
IE Mobile: Not supported
UC Browser for Android: 15.5
Samsung Internet: 15.0, notes for version 13.0₂
QQ Browser: Not supported
Baidu Browser: 13.52
KaiOS Browser: 2.5

Notes

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

Partial support in iOS refers to the browser using EXIF data by default, though it does not actually support the property. ↑
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. ↑

Full support table

IE

5.5	6	7	8	9	10	11
n	n	n	n	n	n	n

Edge

12	13	14	15	16	17	18	79	80	81	83	84	85	86	87	88	89	90	91	92	93	94	95	96	97	98	99	100	101	102	103	104	105	106	107	108	109	110	111	112	113	114	115	116	117	118	119	120	121	122	123	124	125	126	127	128	129	130	131	132	133	134	135	136	137	138	139	140	141	142	143
n	n	n	n	n	n	n	n	n	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y

Firefox

2	3	3.5	3.6	4	5	6	7	8	9	10	11	12	13	14	15	16	17	18	19	20	21	22	23	24	25	26	27	28	29	30	31	32	33	34	35	36	37	38	39	40	41	42	43	44	45	46	47	48	49	50	51	52	53	54	55	56	57	58	59	60	61	62	63	64	65	66	67	68	69	70	71	72	73	74	75	76	77	78	79	80	81	82	83	84	85	86	87	88	89	90	91	92	93	94	95	96	97	98	99	100	101	102	103	104	105	106	107	108	109	110	111	112	113	114	115	116	117	118	119	120	121	122	123	124	125	126	127	128	129	130	131	132	133	134	135	136	137	138	139	140	141	142	143	144	145	146	147	148	149
n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y

Chrome

4	5	6	7	8	9	10	11	12	13	14	15	16	17	18	19	20	21	22	23	24	25	26	27	28	29	30	31	32	33	34	35	36	37	38	39	40	41	42	43	44	45	46	47	48	49	50	51	52	53	54	55	56	57	58	59	60	61	62	63	64	65	66	67	68	69	70	71	72	73	74	75	76	77	78	79	80	81	83	84	85	86	87	88	89	90	91	92	93	94	95	96	97	98	99	100	101	102	103	104	105	106	107	108	109	110	111	112	113	114	115	116	117	118	119	120	121	122	123	124	125	126	127	128	129	130	131	132	133	134	135	136	137	138	139	140	141	142	143	144	145	146
n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y

Safari

3.1	3.2	4	5	5.1	6	6.1	7	7.1	8	9	9.1	10	10.1	11	11.1	12	12.1	13	13.1	14	14.1	15	15.1	15.2-15.3	15.4	15.5	15.6	16.0	16.1	16.2	16.3	16.4	16.5	16.6	17.0	17.1	17.2	17.3	17.4	17.5	17.6	18.0	18.1	18.2	18.3	18.4	18.5-18.6	26.0	26.1	26.2	26.3	TP
n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y

Opera

9	9.5-9.6	10.0-10.1	10.5	10.6	11	11.1	11.5	11.6	12	12.1	15	16	17	18	19	20	21	22	23	24	25	26	27	28	29	30	31	32	33	34	35	36	37	38	39	40	41	42	43	44	45	46	47	48	49	50	51	52	53	54	55	56	57	58	60	62	63	64	65	66	67	68	69	70	71	72	73	74	75	76	77	78	79	80	81	82	83	84	85	86	87	88	89	90	91	92	93	94	95	96	97	98	99	100	101	102	103	104	105	106	107	108	109	110	111	112	113	114	115	116	117	118	119	120	121	122	123	124	125
n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y

Safari on iOS

3.2	4.0-4.1	4.2-4.3	5.0-5.1	6.0-6.1	7.0-7.1	8	8.1-8.4	9.0-9.2	9.3	10.0-10.2	10.3	11.0-11.2	11.3-11.4	12.0-12.1	12.2-12.5	13.0-13.1	13.2	13.3	13.4-13.7	14.0-14.4	14.5-14.8	15.0-15.1	15.2-15.3	15.4	15.5	15.6-15.8	16.0	16.1	16.2	16.3	16.4	16.5	16.6-16.7	17.0	17.1	17.2	17.3	17.4	17.5	17.6-17.7	18.0	18.1	18.2	18.3	18.4	18.5-18.7	26.0	26.1	26.2	26.3
a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y

Opera Mini

all
n

Android Browser

2.1	2.2	2.3	3	4	4.1	4.2-4.3	4.4	4.4.3-4.4.4	143
n	n	n	n	n	n	n	n	n	y

Blackberry Browser

7	10
n	n

Opera Mobile

10	11	11.1	11.5	12	12.1	80
n	n	n	n	n	n	y

Chrome for Android

143
y

Firefox for Android

146
y

IE Mobile

10	11
n	n

UC Browser for Android

15.5
y

Samsung Internet

4	5.0-5.4	6.2-6.4	7.2-7.4	8.2	9.2	10.1	11.1-11.2	12.0	13.0	14.0	15.0	16.0	17.0	18.0	19.0	20	21	22	23	24	25	26	27	28	29
n	n	n	n	n	n	n	n	n	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y

QQ Browser

14.9
n

Baidu Browser

13.52
y

KaiOS Browser

2.5	3.0-3.1
y	y

y = supported
a = partially supported, see notes
x = supported with a prefix, e.g. moz, webkit
p = supported with a polyfill
d = available but disabled by default; the feature need to be enabled in about:config, chrome://flags, etc.
n = not supported
u = unknown/untested

Back to list