image-orientation

Try it

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;
}

Cú pháp

/* Giá trị từ khóa */
image-orientation: none;
image-orientation: from-image; /* Dùng dữ liệu EXIF từ hình ảnh */

/* Giá trị toàn cục */
image-orientation: inherit;
image-orientation: initial;
image-orientation: revert;
image-orientation: revert-layer;
image-orientation: unset;

Giá trị

none

Không áp dụng xoay hình ảnh bổ sung nào; hình ảnh được định hướng theo cách đã mã hóa hoặc theo các giá trị thuộc tính CSS khác quy định.

from-image

Giá trị ban đầu mặc định. Thông tin EXIF chứa trong hình ảnh được dùng để xoay hình ảnh cho phù hợp.

Mô tả

Thuộc tính này chỉ được dùng duy nhất cho mục đích chỉnh sửa hướng của các hình ảnh được chụp khi camera bị xoay. Không nên dùng nó cho các phép xoay tùy ý. Đối với bất kỳ mục đích nào khác ngoài việc chỉnh sửa hướng của hình ảnh do cách chụp hoặc quét, hãy dùng thuộc tính transform với từ khóa rotate để chỉ định phép xoay. Điều này bao gồm bất kỳ thay đổi nào về hướng hình ảnh do người dùng chỉ đạo, hoặc các thay đổi cần thiết để in theo chiều dọc so với chiều ngang.

Nếu được dùng kết hợp với các thuộc tính CSS khác, chẳng hạn như <transform-function>, bất kỳ phép xoay image-orientation nào sẽ được áp dụng trước bất kỳ phép biến đổi nào khác.

Định nghĩa hình thức

Cú pháp hình thức

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

Ví dụ

Định hướng hình ảnh từ dữ liệu hình ảnh

Hình ảnh sau đây đã bị xoay 180 độ, và thuộc tính image-orientation được dùng để chỉnh sửa hướng của nó dựa trên dữ liệu EXIF trong hình ảnh. Bằng cách thay đổi image-orientation thành none, bạn có thể thấy hiệu ứng của thuộc tính.

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;
});

Kết quả

Đặc tả kỹ thuật

Tương thích trình duyệt

Xem thêm

• Các thuộc tính CSS liên quan đến hình ảnh khác: object-fit, object-position, image-rendering, image-resolution.
• transform và rotate