CSS image-orientation Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The image-orientation property controls how a user agent treats an image’s embedded orientation metadata (such as EXIF orientation) when that image is painted. In practical terms it determines whether the browser should honor any rotation or flip information stored inside the image file and present a rotated/flipped bitmap to the page, or ignore that metadata and use the image’s raw pixel layout. This applies to images used in HTML and CSS contexts (replaced elements and CSS image values), so it directly affects what pixels the renderer sees before any further styling or compositing.

Because the property influences whether the image is rotated at the decode/layout stage, it can change intrinsic sizing and aspect-ratio information used by layout. A rotation of 90° or 270° effectively swaps the image’s intrinsic width and height for sizing calculations, which in turn affects how the element containing the image participates in flow, how responsive image selection and art-direction behave, and how scale/crop algorithms compute visible content. This is different from applying a visual rotation via transform, which alters the rendered position and orientation after layout and does not change intrinsic dimensions used for layout decisions.

There are also important interactions and practical considerations. For example, how the image ends up fitting or being cropped depends on intrinsic dimensions, so properties that govern fitting and cropping will see different results when orientation is honored - see object-fit. Likewise, when the image pixels are rotated by the UA, the resampling and interpolation that determine final look can be affected; that ties into image-rendering choices if you need crisp, pixelated, or smoothly filtered output. Finally, honoring or ignoring embedded orientation can have performance and workflow implications: automatic rotation requires additional decoding/transform work, and for predictable cross-platform results many projects prefer to normalize orientation at build or upload time so the browser receives already-corrected image data.

Definition

Initial value: from-image
Applies to: All elements
Inherited: Yes
Computed value: Specified value, rounded and normalized
Animatable: yes
JavaScript syntax: object.style.imageOrientation

Interactive Demo

image-orientation: none;

image-orientation: from-image;

Syntax

image-orientation: from-image | none |[ <angle> || flip ]

Values

from-imageThe 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).
flipThe image is flipped horizontally, that is reflected, after the rotation given by the <angle> value. If no <angle> is given, 0deg is used.

Example

HTML

<div class="gallery">

    <figure>

        <img src="images/hummingbird.jpg" alt="Photo with EXIF orientation" class="image from-image">

        <figcaption>image-orientation: from-image</figcaption>

    </figure>



    <figure>

        <img src="images/hummingbird.jpg" alt="Rotated image" class="image rotated">

        <figcaption>image-orientation: none</figcaption>

    </figure>

</div>

CSS

.gallery {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

figure {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    text-align: center;
}

.image {
    width: 200px;
    height: auto;
    display: block;
    border: 1px solid #ccc;
    border-radius: 6px;
}

.image.from-image {
    image-orientation: from-image;
}

.image.rotated {
    image-orientation: none;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS image-orientation property. Hover over a browser icon to see the version that first introduced support for this CSS property.