图片缩放时保持边缘和平滑 image-rendering

图片缩放时保持边缘和平滑 image-rendering

文章目录

  • 图片缩放时保持边缘和平滑 image-rendering
    • 问题场景:在做响应式布局时,img图片一般会加个`style="width:100%"`进行缩放,但是无论放大还是缩小,图片都会变得模糊,全局加上下面的代码,就可治愈。
    • css代码

问题场景:在做响应式布局时,img图片一般会加个style="width:100%"进行缩放,但是无论放大还是缩小,图片都会变得模糊,全局加上下面的代码,就可治愈。

css代码

img{
    image-rendering: -moz-crisp-edges; image-rendering: -o-crisp-edges; image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; -ms-interpolation-mode: nearest-neighbor;
}

你可能感兴趣的:(样式,#,css)