CSS 雪碧图容器怎么做自适应？

Question

现在有一张300px * 300 px 的九宫格比如下图：

如果我想在100 px * 100 px 的容器中显示图片中的"E" 部分 ,
那么我设置如下样式就可以了：

.box{
  height:100px;
  width: 100px;
  background-image:url(..........);
  background-position: -100px -100px;
}  

如果我想要在200 px * 200 px 的容器中显示图片中的 "E" 部分，
那么我再设置一下图片的大小,并重新设置偏移量就可以了：

.box{
  height:200px;
  width: 200px;
  background-image:url(..........);
  background-position: -200px -200px;
  background-size:600px 600px;
}  

但是现在要使用弹性盒子模型，.box 容器的具体尺寸并不知道，只能保证容器的宽高比例是一定的，怎么能让雪碧图也随之自适应呢？

Answer 1

很明显并没有什么好办的，即使使用容器查询（@container），也并不能很好的解决。
如果容器有自适应的需求，还是不要使用雪碧图来处理了。直接用单个背景图来处理成本和代价会低很多，同时兼容性也会好非常的多。

雪碧图其实只是为了在 HTTP/1.1 时期，减少请求的占用罢了。现阶段直接上 HTTP/2 就行了，成本很低，比你改造雪碧图自适应的成本还要低，而且一劳永逸。