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

概述

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
Animation typediscrete
正规顺序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 Images Module Level 4
image-orientation
Working Draft 增加了对 from-imageflip 关键字的支持.
CSS Images Module Level 3
image-orientation
Candidate Recommendation  

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic support
Experimental
Chrome No support NoEdge ? Firefox Full support 26IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android ? Edge Mobile ? Firefox Android Full support 26Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
flip & <angle>
DeprecatedNon-standard
Chrome No support NoEdge ? Firefox No support 26 — 63IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android ? Edge Mobile ? Firefox Android No support 26 — 63Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.
Deprecated. Not for use in new websites.
Deprecated. Not for use in new websites.

相关链接

文档标签和贡献者

此页面的贡献者: fscholz, prayash, Sebastianz, teoli, ziyunfei
最后编辑者: fscholz,