图像定位 | image-orientation
image-orientation
这是一种实验技术
由于该技术的规格不稳定，请查看各种浏览器的兼容性表格以供使用。还要注意，随着规范的变化，实验技术的语法和行为在未来版本的浏览器中可能会发生变化。
image-orientation描述如何更正图像的默认方向。
image-orientation: 0deg;
image-orientation: 6.4deg; /* Rounded to 0deg */
image-orientation: -90deg; /* Equivalent to 270deg, its normalized
computed value */
image-orientation: from-image; /* Use EXIF data from the image */
image-orientation: 90deg flip; /* Rotate 90deg, and flip it horizontally */
image-orientation: flip; /* No rotation, only applies a
horizontal flip */
/* Global values */
image-orientation: inherit;
image-orientation: initial;
image-orientation: unset;
注：
- 此属性不是用于对图像执行任意旋转，而是用于纠正错误的方向。这就是为什么它被四舍五入到最接近的四分之一的原因。
- 同样，这个属性并不是用来处理布局 - >肖像的变化。由于image-orientation只影响图像，所以不能工作：更改必须在布局级别发生。
| 初始值 | 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 type | discrete |
| 规范顺序 | the unique non-ambiguous order defined by the formal grammar |
句法
取值
from-image包含在图像中的EXIF信息将用于适当地旋转图像。<angle>在<angle>旋转应用到图像。它四舍五入到最近的90deg（0.25turn）。flip图像被水平翻转，即在由<angle>值给出的旋转之后反射。如果没有<angle>给出，0deg则使用。
形式语法
from-image | <angle> | [ <angle>? flip ]
例
CSS内容
#image {
image-orientation: flip; /* Can be changed in the live sample */
}
结果
规格
| Specification | Status | Comment |
|---|---|---|
| CSS Image Values and Replaced Content Module Level 4The definition of 'image-orientation' in that specification. | Working Draft | The from-image and flip keywords have been added. |
| CSS Image Values and Replaced Content Module Level 3The definition of 'image-orientation' in that specification. | Candidate Recommendation | Initial definition |
浏览器兼容性
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| Basic support | No support | 26 (26) | No support | No support | No support |
| from-image | No support | 26 (26) | No support | No support | No support |
| flip | No support | 26 (26) | No support | No support | No support |
| Feature | Android | Firefox Mobile (Gecko) | Firefox OS (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Basic support | No support | 26.0 (26) | 1.2 (26) | No support | No support | No support |
| from-image | No support | 26.0 (26) | 1.2 (26) | No support | No support | No support |
| flip | No support | 26.0 (26) | 1.2 (26) | No support | No support | No support |
