css 设置图片缩放不变形

（1）设置image 属性

{
   max-width: 100%;
   max-height: 100%;
}

可实现图片在指定父元素内等比例缩放，但不保证宽高同时充满父元素，如果想要达到图片充满父元素且保持清晰度，最保险的方法是提供与父元素等比例的设计图

参考文章/博客：

div css布局中CSS图片大小自动按比例等比例缩小图片不变形解决技巧

css图片按比例缩放不变形

 

（2）设置css属性 image-rendering  --- 注意浏览器兼容性

• auto
  使用默认算法，即将图片色彩进行平滑缩放，不同的浏览器采用的算法不一，如：firefox 3.0后的gecko使用双线性插值（bilinear interpolation）算法

• crisp-edges
  使用算法达达到在绽放时保持对比度和边缘，在加工时不平滑色彩和使用模糊

• pixelated  ---较常用
  当图片放大时，单纯地去放大像素点，缩小时与auto效果一样

参考博文：

css属性image-redering详解

MDN web Docs image-rendering