标签: image

  • 阻止浏览器根据 EXIF 信息自动修正图像旋转方向 image-orientation

    CSS 属性 image-orientation 用来修正某些图片的预设方向。

    当需要对图像原始状态进行操作时,这种自动修正会带来错误。尤其是在新版浏览器中该属性默认值从不生效(none)被改成了 from-image,此时导致在 Chrome v81 浏览器上处理一些带角度的图像时产出错误的信息。

    /* 正确的默认值应该是0 */
    image-orientation: 0deg /* 实际该值无效 */
    image-orientation: none /* 实际该值生效,可以阻止浏览器自动旋转图像(disable html img auto rotation) */

    /* 非 90 度的整数倍, 所以会被四舍五入到 0 度 */
    image-orientation: 6.4deg

    /* 相当于 270deg */
    image-orientation: -90deg

    /* 使用图片的 EXIF 数据 */
    image-orientation: from-image

    /* 旋转 90deg, 再水平翻转 */
    image-orientation: 90deg flip

    /* 不旋转, 只进行水平翻转 */
    image-orientation: flip

    /* 继承 */
    image-orientation: inherit

    该属性还未进入标准文档,在未来版本的浏览器中该功能的语法和行为可能随之改变。