image-orientation
åºçº¿
广æ³å¯ç¨
èª 2020å¹´4æ èµ·ï¼æ¤ç¹æ§å·²å¨ä¸»æµæµè§å¨ä¸å¾å°æ¯æï¼å¯å¨å¤§å¤æ°è®¾å¤åæµè§å¨çæ¬ä¸æ£å¸¸ä½¿ç¨ã
CSS 屿§ image-orientation ç¨æ¥ä¿®æ£æäºå¾ççé¢è®¾æ¹åã
夿³¨ï¼
- è¯¥å±æ§ä¸æ¯ç¨æ¥å¯¹å¾çè¿è¡ä»»æè§åº¦æè½¬çï¼å®æ¯ç¨æ¥ä¿®æ£é£äºå¸¦æä¸æ£ç¡®çé¢è®¾æ¹åçå¾ççãå æ¤è¯¥å±æ§å¼ä¼è¢«åèäºå ¥å° 90 åº¦çæ´æ°åã
- Similarly this property is not intented to handle the layout -> portrait changing. As
image-orientationaffects only images, it won't work: the changes must happen at the layout-level
| åå§å¼ | from-image |
|---|---|
| éç¨å ç´ | ææå ç´ |
| æ¯å¦æ¯ç»§æ¿å±æ§ | æ¯ |
| 计ç®å¼ | an <angle>, rounded to the next quarter turn from 0deg and normalized, that is moduloing the value by 1turn |
| å¨ç»ç±»å | 离æ£å¼ |
è¯æ³
css
/* å
³é®åå¼ */
image-orientation: none;
image-orientation: from-image; /* 使ç¨å¾çç EXIF æ°æ® */
/* å
¨å±å¼ */
image-orientation: inherit;
image-orientation: initial;
image-orientation: revert;
image-orientation: revert-layer;
image-orientation: unset;
屿§å¼
from-image-
æ ¹æ®å¾çç EXIF æ°æ®æ¥æè½¬å¾çï¼EXIF 䏿ä¸ä¸ªæ§å¶å¾çæè½¬åº¦ç屿§ã
<angle>-
å¾çæè½¬å¼
<angle>, ä¼è¢«èªå¨åèäºå ¥å°90deg(0.25turn) çæ´æ°åã flip-
对å¾çè¿è¡æ°´å¹³ç¿»è½¬ï¼å è¿è¡ç¬¬äºä¸ªåæ°æ§è¡çæè½¬ï¼åè¿è¡æ¤æ¬¡ç¿»è½¬ã
å½¢å¼è¯æ³
| åå§å¼ | from-image |
|---|---|
| éç¨å ç´ | ææå ç´ |
| æ¯å¦æ¯ç»§æ¿å±æ§ | æ¯ |
| 计ç®å¼ | an <angle>, rounded to the next quarter turn from 0deg and normalized, that is moduloing the value by 1turn |
| å¨ç»ç±»å | 离æ£å¼ |
å½¢å¼å®ä¹
image-orientation =
from-image |
none |
[ <angle> || flip ]
示ä¾
>è§è
| è§è |
|---|
| CSS Images Module Level 3 > # the-image-orientation > |
æµè§å¨å ¼å®¹æ§
åè§
- å
¶ä»åå¾çç¸å
³ç CSS 屿§ï¼
image-renderingãimage-resolutionã