---
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 -&gt; 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>&lt;angle&gt;</code></dt>
 <dd>图片旋转值 {{cssxref("&lt;angle&gt;")}} , 会被自动四舍五入到 <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>