【雪碧图大小的问题 _雪碧图 】 | IT修真院·坑乎
问题已收录 雪碧图大小的问题
我也踩过这个坑( 1 )
已统计您的踩坑,无需重复点击
回答(1)
雪碧图
详细描述
截图
代码
编辑于2024-04-29
  • [深圳|结业弟子]JS-钟俊
    2

    用transform缩放雪碧图是没有问题的,那为什么你的调整会造成图片的偏移呢,

    因为是你的transform属性用错了;我们用transform属性调整雪碧图,往往是去

    缩放单个的图片的大小,而你可能写的是整体图片的缩放,

    举个栗子:

    .img1 {
    width: 20px;
       height: 20px;
       background: url(/img.png) -85px -10px;
       transform:scale(0.5);
    }

    //解释一下:单个图片宽度,高度,

    //图片链接,以及图片在整个雪碧图里的位置

    //最后就是transfrom属性了;


    如果你不喜欢用transfrom来缩放,其实还可以用zoom属性;

    zoom与transfrom:scale还存在一下区别,可以去甄别比较一下:

    zoom的缩放是相对于左上角的;而scale默认是居中缩放;
    zoom的缩放改变了元素占据的空间大小;而scale的缩放占据的原始尺寸不变,页面布局不会发生变化;
    zoom和scale对元素的渲染计算方法可能有差异(需要自己动手,用高清图,仔细去看其中的区别)。
    对文字的缩放规则不一致。zoom缩放依然受限于最小12像素中文大小限制;而scale就是纯粹的对图形进行比例控制,文字50%原来尺寸。

    编辑于2019-03-26