PUBLISHED ON: APRIL 12, 2021
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.
