Hurry! Try our new Interactive Courses for FREE. 🥳   🚀

CSS image-orientation Property

The image-orientation property in CSS is known for specifying the layout independent correction to the orientation of an image. It must not be used for any other orientation adjustments.

The transform property must be used in its place, along with the rotate transform-function property. This property was made only to be used for correcting the orientation of the images that were shot with the camera in a rotated way.

This property may be specified as keywords like none or from-image. The none value does not apply any additional image rotation and the from-image value is the default initial value.

Syntax

from-image | <angle> | [ <angle>? flip ]

Example 1: CSS image-orientation Property

<!DOCTYPE html>
<html>
<head>
	<title>The image-orientation property in CSS</title>
	<style type="text/css">
		border-box {
		  image-orientation: none; 
		  background-color: pink;
		  border: 2px solid blue;
		}
		div{
			color: red;
			background-color: skyblue;
		}
	</style>
</head>
<body>
	<div class="border-box">Study Tonight</div>
</body>
</html>

Output

Live Example

Here in this live example, you can easily test the live coding and execute the example using different values or edit the coding and create your own example.

Browser Compatibility

The term 'browser compatibility' indicates the ability of a particular website to appear fully functional on several browsers, available in the market. This means that the HTML coding of the website and the scripts on that website must be compatible to run on the browsers. It is of immense importance today when there is a large variety of web browsers available.

Name of Browser Background size contain and cover
Chrome 81 81
Edge 81 81
Firefox 26 26
Internet Explorer no no
Opera 67 67
Safari 13.1 13.1
Webview Android 81 81
Chrome Android 81 81
Firefox Android 26 26
Opera Android no no
IOS Safari 13.4 13.4
Samsung Internet 13.0 13.0

Conclusion

The initial value for the image-orientation property in CSS is from-image. This property is applicable to all the elements. It is an inherited property. The computed value for the image-orientation property in CSS is an angle that is rounded to the next quarter turn from zero degrees. The animation type for this property is discrete.