image-orientation

Baseline 已广泛支持

此功能已成熟，可跨多种设备和浏览器版本使用。自 ⁨2020 年 4 月⁩起，所有浏览器均已提供此功能。

image-orientation CSS 属性指定了与布局无关的图像方向校正。

试一试

image-orientation: none;

image-orientation: from-image;

<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    src="/shared-assets/images/examples/hummingbird.jpg" />
</section>

#example-element {
  height: inherit;
}

语法

css

/* keyword values */
image-orientation: none;
image-orientation: from-image; /* Use EXIF data from the image */

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

值

none: 不应用任何额外的图像旋转；图像的朝向按编码或由其他 CSS 属性值决定。
from-image: 默认初始值。使用图像中包含的 EXIF 信息来适当地旋转图像。

警告：出于安全考虑，image-orientation: none; 不会覆盖非安全来源图像根据其 EXIF 信息编码的方向。有关更多信息，请参阅 CSS 工作组草案问题。

描述

此属性仅用于校正因相机旋转而拍摄的图像的方向。它不应用于任意旋转。除了校正图像因拍摄或扫描方式而产生的方向问题之外，任何其他目的都应使用带有 rotate 关键字的 transform 属性来指定旋转。这包括用户对图像方向的任何更改，或因纵向与横向打印而需要的更改。

如果与其他 CSS 属性（例如 <transform-function>）结合使用，则任何 image-orientation 旋转都会在其他任何变换之前应用。

正式定义

初始值	`from-image`
应用于	所有元素
继承性	是
计算值	一个 `<angle>`，从 `0deg` 开始四分之一圈取整并归一化，即对值进行 `1turn` 取模
动画类型	离散

正式语法

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

示例

根据图像数据调整图像方向

以下图像已旋转 180 度，并使用 image-orientation 属性根据图像中的 EXIF 数据校正其方向。通过将 image-orientation 更改为 none，您可以看到该属性的效果。

CSS

css

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

img {
  margin: 0.5rem 0;
}

label {
  font-family: monospace;
}

<img id="image" src="oriole.jpg" alt="Orientation taken from the image" />

<div>
  <input
    type="radio"
    id="from-image"
    name="orientation"
    value="from-image"
    checked />
  <label for="from-image">from-image</label>
</div>

<div>
  <input type="radio" id="none" name="orientation" value="none" />
  <label for="none">none</label>
</div>

document.addEventListener("change", (evt) => {
  document.getElementById("image").style.imageOrientation = evt.target.value;
});

结果

规范

规范
CSS 图像模块第三级 # 图像方向

浏览器兼容性

另见

其他与图像相关的 CSS 属性：object-fit、object-position、image-rendering、image-resolution。
transform 和 rotate

帮助改进 MDN

了解如何贡献

此页面由 MDN 贡献者于 ⁨2025 年 7 月 14 日⁩ 最后修改。

在 GitHub 上查看此页面 • 报告此内容存在的问题