Our volunteers haven't translated this article into Bahasa Indonesia yet. Join us and help get the job done!
You can also read the article in English (US).

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The image-orientation CSS property describes how to correct the default orientation of an image.

/* <angle> values */
image-orientation: 0deg;
image-orientation: 6.4deg;     /* Rounded to 0deg */
image-orientation: -90deg;     /* Equivalent to 270deg, its normalized
                                  computed value */
image-orientation: from-image; /* Use EXIF data from the image */
image-orientation: 90deg flip; /* Rotate 90deg, and flip it horizontally */
image-orientation: flip;       /* No rotation, only applies a
                                  horizontal flip */

/* Global values */
image-orientation: inherit;
image-orientation: initial;
image-orientation: unset;

Notes:

  • This property is intended to correct erroneous image orientations, not to perform arbitrary rotations. That is why it's rounded to the nearest quarter of a turn.
  • Similarly, this property is not intended to handle the layout -> portrait changing. As image-orientation affects only images, it won't work: the changes must happen at the layout level.

Initial value0deg
Applies toall elements
Inheritedyes
Mediavisual
Computed valuean <angle>, rounded to the next quarter turn from 0deg and normalized, that is moduloing the value by 1turn
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Syntax

Values

from-image
The EXIF information contained in the image will be used to rotate the image appropriately.
<angle>
The <angle> of rotation to apply to the image. It is rounded to the nearest 90deg (0.25turn).
flip
The image is flipped horizontally (i.e., reflected) after the rotation given by the <angle> value is applied. If no <angle> is given, 0deg is used.

Formal syntax

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

Example

CSS

#image {
  image-orientation: flip; /* Can be changed in the live sample */
}

Result

Specifications

Specification Status Comment
CSS Images Module Level 4
The definition of 'image-orientation' in that specification.
Working Draft The from-image and flip keywords have been added.
CSS Images Module Level 3
The definition of 'image-orientation' in that specification.
Candidate Recommendation Initial definition.

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support No ?26 No No No
from-image No ?26 No No No
flip No ?26 No No No
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support No ? ?26 No No ?
from-image No ? ?26 No No ?
flip No ? ?26 No No ?

See also

Tag Dokumen dan Kontributor

 Terakhir diperbarui oleh: mfluehr,