mozilla
Your Search Results

    image-orientation

    This is an experimental technology
    Because this technology's specification has not stabilized, check the compatibility table for the proper prefixes to use in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the spec changes.

    Summary

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

    Note:

    • This property is not intended to perform arbitrary rotation on an image, but to correct erroneous orientation. That's why it is 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 value 0deg
    • Applies to all elements
    • Inherited yes
    • Media visual
    • Computed value an <angle>, rounded to the next quarter turn from 0deg and normalized, that is moduloing the value by 1turn
    • Animatable no
    • Canonical order the unique non-ambiguous order defined by the formal grammar

    Syntax

    Formal syntax: from-image | <angle> | [<angle>? flip]
    
    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 */
    
    image-orientation: inherit
    

    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, that is reflected, after the rotation given by the <angle> value. If no <angle> is given, 0deg is used.

    Examples

    Specifications

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

    Browser compatibility

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    Basic support Not supported 26 (26) Not supported Not supported Not supported
    from-image Not supported 26 (26) Not supported Not supported Not supported
    flip Not supported 26 (26) Not supported Not supported Not supported
    Feature Android Firefox Mobile (Gecko) Firefox OS (Gecko) IE Phone Opera Mobile Safari Mobile
    Basic support Not supported 26.0 (26) 1.2 (26) Not supported Not supported Not supported
    from-image Not supported 26.0 (26) 1.2 (26) Not supported Not supported Not supported
    flip Not supported 26.0 (26) 1.2 (26) Not supported Not supported Not supported

    See also

    Document Tags and Contributors

    Contributors to this page: Sheppy, ethertank, bfrohs, kscarfone, Sebastianz, teoli
    Last updated by: Sebastianz,