vue/css中，如何在这张背景图下做自适应？

Question

如上所示，小弟先谢谢各位大神们的解答！感激不尽！

Answer 1

让最外部容器旋转就好，然后背景铺满的话可以使用 background-size:cover 或者 background-size:100% 100% 👉 background-size - CSS | MDN
但其实最好是在手机屏幕竖屏时提醒用户把屏幕横过来，而不是手动去修改屏幕为横屏。

因为会有一些坑，比如说你横屏了之后会继续旋转，播放视频时左右拖动不能快进快退，所以一般都是搭配JS来做处理。

相关阅读

JELLY | H5游戏开发：横屏适配
【原】js检测移动端横竖屏 - 咸鱼老弟 - 博客园
怎么让网页在手机上直接就是横屏显示的?

Answer 2

了解一下css 的display:flex;
display:flex;
justify-content:space-beteen;//当前行平行平分;
align-item:center;//当前行平行剧中对齐
flex-direction:column;//设置主轴方向