CSS - image-orientation Property

The image-orientation property in CSS is used to define how an image is displayed or oriented within its container when the aspect ratio of the image does not match the aspect ratio of the container.

The property can have following values:

  • from-image: Default value. Image is displayed with its inherent orientation, as defined by the image file itself.

  • none: Image is displayed in its original aspect ratio without any rotation or orientation adjustment.

This property is particularly useful when dealing with responsive designs or images that have been rotated but need to be displayed correctly within a container.

Applies to

All the HTML elements.

DOM Syntax

object.style.imageOrientation = "from-image";

CSS image-orientation Example

The following example demonstrates how to use image-orientation property with different values such as none, from-image −

<html>
<head>
</head>
<body>
   <h2 style="margin-bottom: 50px;">Image orientation</h2>
   <div>
   <h3>orientation - none</h3>
   <img style="image-orientation: none;" src="images/logo.png" alt="none">
   <h3>orientation - from-image</h3>
   <img style="image-orientation: from-image;" src="images/logo.png" alt="from-image">
   </div>
</body>
</html>
Advertisements