pc端有大幅背景的div，自适应该怎么做呢？

Question

第一屏是整个的div，div有背景图，
怎么能在浏览器改变尺寸时，都可以正好显示背景图呢？

用rem有兼容性问题，
用百分比布局，宽度缩减而高度不变，这样显示背景图会有问题，

还有什么办法吗？

谢谢~

Answer 1

可以试试下面这个CSS

background-image:url("https://cdn.lfio.net/ACT.png");
height: 100%;
background-size: cover;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0;
padding: 0;

Answer 2

background-size设置100% 或者 cover。
背景图使用高清图，防止平铺的时候图片失真

Answer 3

rem也不能兼容的，估计就是要考虑IE8之类的。那background-size, object-fit之类的也没法用了。嗯，剩下来貌似只有js了。。。

Answer 4

或是直接使用把背景图片提出来用img标签就可以了