postcss-lazysprite icon indicating copy to clipboard operation
postcss-lazysprite copied to clipboard

1倍图也添加background-size

Open xw5 opened this issue 4 years ago • 10 comments

能否增加一个配置1倍图也添加background-size,不然的做rem适配的时候因为没有定义background-size会有问题

xw5 avatar Apr 23 '20 07:04 xw5

请问可以具体说下 rem 适配时候必须要定义background-size 的原因是?

Jeff2Ma avatar Apr 26 '20 04:04 Jeff2Ma

rem适配的原理就是根据html的font-size缩放适配,如果没有定义background-size的时候会导致背景图还是原图片大小,这样通过背景图定位裁剪就不准了。

xw5 avatar Apr 26 '20 11:04 xw5

哦 明白了

Jeff2Ma avatar Apr 26 '20 13:04 Jeff2Ma

我提了个了PR,可以直接合一下,呵呵

xw5 avatar Apr 26 '20 13:04 xw5

发了个新包,增加了 keepBackGroundSize 这个option,default false.

Jeff2Ma avatar Apr 26 '20 13:04 Jeff2Ma

亲,你还是没改对地方,你只是加他配置是否要加上background-size,但是还是绕开了1倍图的。 这里要去掉image.ratio > 1,而且你默认为false的话会导致2倍3倍图的使用会有问题,是不是可以不用加配置直接放开这里的限制,所有图都加上background-size即可 `if (image.ratio > 1 || options.keepBackGroundSize) { backgroundSize = postcss.decl({ prop: 'background-size', value: getBackgroundSize(image) });

      backgroundPosition.after(backgroundSize);
					backgroundPosition.after(backgroundSize);
				}
			}`

xw5 avatar Apr 26 '20 14:04 xw5

因为正常情况下不必在 1x 下也输出background-size,所以还是做成了一个选项。“默认为false的话会导致2倍3倍图的使用会有问题” 不清楚具体有什么问题,还请细说下。

Jeff2Ma avatar Apr 27 '20 04:04 Jeff2Ma

那你加这个配置意义何在?2x图和3x图本身就必须要指定background-size,现在的问题就是1x的没有指定background-size导致rem布局下定位裁剪出错

xw5 avatar Apr 27 '20 04:04 xw5

加了这个 option 且设为 true 情况下就会有 1,2,3x 下都会输出background-size

Jeff2Ma avatar Apr 27 '20 06:04 Jeff2Ma

TKS,可以了,但是推荐只对一倍图控制就好,因为2x和3x本身就需要指定background-size

xw5 avatar Apr 27 '20 14:04 xw5