image-orientation

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

概述

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
  • 适用媒体 visual
  • 计算值 an <angle>, rounded to the next quarter turn from 0deg and normalized, that is moduloing the value by 1turn
  • 可动画
  • Canonical order the unique non-ambiguous order defined by the formal grammar

语法

语法形式: 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 Image Values and Replaced Content Module Level 4 Working Draft 增加了对 from-imageflip 关键字的支持.
CSS Image Values and Replaced Content Module Level 3 Candidate Recommendation  

浏览器兼容性

支持特性 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本支持 Not supported 26 (26) Not supported Not supported Not supported
from-image Not supported 26 (26) Not supported Not supported Not supported
flip Not supported 26 (26) Not supported Not supported Not supported
支持特性 Android Firefox Mobile (Gecko) Firefox OS (Gecko) IE Phone Opera Mobile Safari Mobile
基本支持 Not supported 26.0 (26) 1.2 (26) Not supported Not supported Not supported
from-image Not supported 26.0 (26) 1.2 (26) Not supported Not supported Not supported
flip Not supported 26.0 (26) 1.2 (26) Not supported Not supported Not supported

相关链接

Document Tags and Contributors

Contributors to this page: ziyunfei, teoli
最后编辑者: teoli,