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 上檢視此頁面 • 報告此內容存在的問題