Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

1倍图也添加background-size #59

Open
xw5 opened this issue Apr 23, 2020 · 10 comments
Open

1倍图也添加background-size #59

xw5 opened this issue Apr 23, 2020 · 10 comments

Comments

@xw5
Copy link

xw5 commented Apr 23, 2020

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

@Jeff2Ma
Copy link
Owner

Jeff2Ma commented Apr 26, 2020

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

@xw5
Copy link
Author

xw5 commented Apr 26, 2020

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

@Jeff2Ma
Copy link
Owner

Jeff2Ma commented Apr 26, 2020

哦 明白了

@xw5
Copy link
Author

xw5 commented Apr 26, 2020

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

@Jeff2Ma
Copy link
Owner

Jeff2Ma commented Apr 26, 2020

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

@xw5
Copy link
Author

xw5 commented Apr 26, 2020

亲,你还是没改对地方,你只是加他配置是否要加上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);
				}
			}`

@Jeff2Ma
Copy link
Owner

Jeff2Ma commented Apr 27, 2020

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

@xw5
Copy link
Author

xw5 commented Apr 27, 2020

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

@Jeff2Ma
Copy link
Owner

Jeff2Ma commented Apr 27, 2020

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

@xw5
Copy link
Author

xw5 commented Apr 27, 2020

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants