image-orientation
**image-orientation
** CSS 属性指定与布局无关的图像方向校正。
试一试
语法
css
/* keyword values */
image-orientation: none;
image-orientation: from-image; /* Use EXIF data from the image */
/* Global values */
image-orientation: inherit;
image-orientation: initial;
image-orientation: revert;
image-orientation: revert-layer;
image-orientation: unset;
值
none
-
不应用任何额外的图像旋转;图像的方向与编码的方向或其他 CSS 属性值指定的方向相同。
from-image
-
默认初始值。图像中包含的 EXIF 信息用于适当旋转图像。
警告:由于安全问题,image-orientation: none;
**不会**覆盖其 EXIF 信息编码的非安全来源图像的方向。从 CSS 工作组草案问题 中了解更多信息。
描述
此属性仅用于校正以旋转的相机拍摄的图像的方向。不应将其用于任意旋转。对于除校正图像方向(由于其拍摄或扫描方式)以外的任何目的,请使用带有 rotate
关键字的 transform
属性来指定旋转。这包括用户对图像方向的任何更改,或纵向或横向打印所需的更改。
如果与其他 CSS 属性(例如 <transform-function>
)一起使用,则任何 image-orientation
旋转都将在任何其他变换之前应用。
正式定义
正式语法
示例
根据图像数据确定图像方向
以下图像已旋转 180 度,并且 image-orientation
属性用于根据图像中的 EXIF 数据校正其方向。通过将 image-orientation
更改为 none
,您可以看到该属性的效果。
CSS
css
#image {
image-orientation: from-image; /* Can be changed in the live sample */
}
结果
规范
规范 |
---|
CSS 图像模块级别 3 # the-image-orientation |
浏览器兼容性
BCD 表仅在浏览器中加载
另请参阅
- 其他与图像相关的 CSS 属性:
object-fit
、object-position
、image-rendering
、image-resolution
。 transform
和rotate