Skip to content

[css] 第275天 css图片缩放失真出现锯齿的如何解决呢? #1781

Open
@haizhilin2013

Description

@haizhilin2013

第275天 css图片缩放失真出现锯齿的如何解决呢?

我也要出题

Activity

forever-z-133

forever-z-133 commented on Jan 16, 2020

@forever-z-133

换个 2x 图,使用 css 的 image-rendering,用 AI 修复失真

liwudi

liwudi commented on Jan 17, 2020

@liwudi

1、-ms-interpolation-mode,这是针对IE的解决方案。其值设置为bicubic。
2、image-rendering,这是提供了一个速度VS质量之间做权衡的图像缩放关系。
额外的思考:
1、微信上传图片时,服务端会自动把图片做不同尺寸的处理。我们可以采用这个思路来解决图片缩放产生的问题。
2、SVG的技术,是一种矢量图的解决方案,缩放不会产生失真,我们可以把图片转为SVG来展示。
3、canvas技术,也是一种绘图技术,可以把图片转为canvas。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @haizhilin2013@forever-z-133@liwudi

        Issue actions

          [css] 第275天 css图片缩放失真出现锯齿的如何解决呢? · Issue #1781 · haizlin/fe-interview