image-orientation - CSS（层叠样式表） 编辑

这是一个实验中的功能
此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

概述

CSS 属性 image-orientation 用来修正某些图片的预设方向.

注意:

• 该属性不是用来对图片进行任意角度旋转的, 它是用来修正那些带有不正确的预设方向的图片的. 因此该属性值会被四舍五入到 90 度的整数倍.
• Similarly this property is not intented to handle the layout -> portrait changing. As image-orientation affects only images, it won't work: the changes must happen at the layout-level

初始值	0deg
适用元素	all elements
是否是继承属性	yes
计算值	an angle, rounded to the next quarter turn from 0deg and normalized, that is moduloing the value by 1turn
Animation type	discrete

语法

语法形式: from-image | <angle> | [ <angle>? flip ]

image-orientation: 0deg
image-orientation: 6.4deg     /* 非 90 度的整数倍, 所以会被四舍五入到 0 度 */
image-orientation: -90deg     /* 相当于 270deg */
image-orientation: from-image /* 使用图片的 EXIF 数据 */
image-orientation: 90deg flip /* 旋转 90deg, 再水平翻转 */
image-orientation: flip       /* 不旋转, 只进行水平翻转 */

image-orientation: inherit

属性值

from-image

根据图片的 EXIF 数据来旋转图片, EXIF 中有一个控制图片旋转度的属性.

<angle>

图片旋转值 <angle> , 会被自动四舍五入到 90deg (0.25turn) 的整数倍.

flip

对图片进行水平翻转, 先进行第二个参数执行的旋转, 再进行此次翻转.

示例

规范

规范名称	规范状态	备注
CSS Images Module Level 4 image-orientation	Working Draft	增加了对 from-image 和 flip 关键字的支持.
CSS Images Module Level 3 image-orientation	Candidate Recommendation

浏览器兼容性

BCD tables only load in the browser

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

相关链接

• 其它和图片相关的 CSS 属性: image-rendering, image-resolution.