css小技巧：sprite精灵图的适配

最近做vue项目，把小图标优化到一张大图里去，配置了webpack-spritesmith，由于项目配置了postcss-px-to-viewport做适配，所以小图标也需要缩放，这里为了简单点，就直接用了2倍图，应该能满足目前手机各种分辨率；

至于为啥要用2倍图，因为显示小图标都是用backgroun-Image,background-Size去显示，也就是所谓的css背景图定位，不像img标签，可以直接改变大小，css背景定位，改变大小需要各种计算，所以这里采用了transform:scale(0.5)去适配；

由于scale缩放不会重排，占用的空间大小还是缩放前的空间大小，所以不利于排版；

于是产生了想法：用一个父div包起来，然后overflow:hidden,将图标居中显示，这样就可以控制占用空间大小，但是这种情况属于子元素大于父元素的，不知道用css可不可行

试了试，居然可行：

          <div class="icon-clip">
            <a class="icon icon-circle-photo"></a>
          </div>

a标签是css背景定位显示的图标，样式如下：

            .icon-clip {
                width: 60px;
                height: 60px;
                display: inline-flex;
                justify-content: center;
                align-items: center;
                .icon {
                    flex-shrink: 0;
                }
            }

完美解决

css小技巧：sprite精灵图的适配

原文：https://www.cnblogs.com/chenxingyu/p/12873347.html