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
计算值an angle, rounded to the next quarter turn from 0deg and normalized, that is moduloing the value by 1turn
Animation typediscrete

语法

语法形式: 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-imageflip 关键字的支持.
CSS Images Module Level 3
image-orientation
Candidate Recommendation  

浏览器兼容性

BCD tables only load in the browser

相关链接