css 设置图片缩放不变形 | 您所在的位置:网站首页 › 照片如何缩小尺寸打印不变形 › 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 |
CopyRight 2018-2019 实验室设备网 版权所有 |