1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
|
---
title: image-orientation
slug: Web/CSS/image-orientation
translation_of: Web/CSS/image-orientation
---
<div>{{CSSRef}}</div>
<div>{{SeeCompatTable}}</div>
<h2 id="概述">概述</h2>
<p><code><a href="/en-US/docs/CSS" style="font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'DejaVu Sans', Lucida, Arial, Helvetica, sans-serif; line-height: inherit;">CSS</a><span style="font-family: lucida grande,lucida sans unicode,dejavu sans,lucida,arial,helvetica,sans-serif; line-height: inherit;"> 属性</span> image-orientation</code> 用来修正某些图片的<span style="line-height: inherit;">预设方向</span><span style="line-height: inherit;">.</span></p>
<div class="note style-wrap">
<p><strong>注意:</strong></p>
<ul>
<li>该属性不是用来对图片进行任意角度旋转的, 它是用来修正那些带有不正确的预设方向的图片的. 因此该属性值会被四舍五入到 90 度的整数倍.</li>
<li>Similarly this property is not intented to handle the layout -> portrait changing. As <code>image-orientation</code> affects only images, it won't work: the changes must happen at the layout-level</li>
</ul>
</div>
<p>{{cssinfo}}</p>
<h2 id="语法">语法</h2>
<pre class="twopartsyntaxbox"><a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">语法形式</a>: {{csssyntax("image-orientation")}}
</pre>
<pre>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
</pre>
<h3 id="属性值">属性值</h3>
<dl>
<dt><code>from-image</code></dt>
<dd>根据图片的 EXIF 数据来旋转图片, EXIF 中有一个控制图片旋转度的属性.</dd>
<dt><code><angle></code></dt>
<dd>图片旋转值 {{cssxref("<angle>")}} , 会被自动四舍五入到 <code>90deg</code> (<code>0.25turn</code>) 的整数倍.</dd>
<dt><code>flip</code></dt>
<dd>对图片进行水平翻转, 先进行第二个参数执行的旋转, 再进行此次翻转.</dd>
</dl>
<h2 id="示例">示例</h2>
<h2 id="规范">规范</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">规范名称</th>
<th scope="col">规范状态</th>
<th scope="col">备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS4 Images', '#image-orientation', 'image-orientation')}}</td>
<td>{{Spec2('CSS4 Images')}}</td>
<td>增加了对 <code>from-image</code> 和 <code>flip</code> 关键字的支持.</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Images', '#image-orientation', 'image-orientation')}}</td>
<td>{{Spec2('CSS3 Images')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2>
<div>
<p>{{Compat("css.properties.image-orientation")}}</p>
</div>
<h2 id="相关链接">相关链接</h2>
<ul>
<li>其它和图片相关的 CSS 属性: {{cssxref("image-rendering")}}, {{cssxref("image-resolution")}}.</li>
</ul>
|
