CSS参考手册
图像值 | Image Values
图像定位 | 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 |
图像值 | Image Values相关
层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。