AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

js手风琴影响body背景图自适应屏幕高度

2023-04-23 53
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： js手风琴影响body背景图自适应屏幕高度

js影响背景图片问题解决方法：

一个长图，怎么根据菜单栏伸展自适应屏幕高度，不足屏幕高度时默认100vh，

这里可以用js去监听他的高度然后根据他的高度来设置图片大小，但css设置效果会更好些也比较简单，简单看一下吧

.body {
    background-image: url(../img/bg.png);
    width: 100%;
    background-size: 100% auto;
    max-width: 100%;
    min-height: 100vh;
    margin: auto;
}



文章标签：
JavaScript
前端开发
关键词：
JavaScript屏幕
JavaScript自适应
JavaScript body
JavaScript手风琴
JavaScript背景图
SouthernWind
目录
相关文章
亚丁号
|
4月前
|
移动开发 JavaScript 前端开发
分享82个JS手风琴效果，总有一款适合您
分享82个JS手风琴效果，总有一款适合您
亚丁号
61 1
极客李华
|
4月前
|
JavaScript 前端开发 数据安全/隐私保护
JS点击切换背景图
JS点击切换背景图
极客李华
59 0
朝阳39
|
2月前
|
JavaScript
js【图解】滚动条的位置（文档与屏幕间的距离），鼠标事件距离（位置），元素距离（位置）
js【图解】滚动条的位置（文档与屏幕间的距离），鼠标事件距离（位置），元素距离（位置）
朝阳39
31 7
爱你三千遍斯塔克
|
3月前
|
移动开发 JavaScript 前端开发
rem的适配方案，css文件和js文件的引入方式，特色小边框的制作，DS-Digital.ttf数字展示屏的使用方法：，自适应图片 background-size，jQuery爆bug,a和盒子居中,
rem的适配方案，css文件和js文件的引入方式，特色小边框的制作，DS-Digital.ttf数字展示屏的使用方法：，自适应图片 background-size，jQuery爆bug,a和盒子居中,
爱你三千遍斯塔克
63 0
龙腾九州
|
4月前
|
JavaScript 前端开发
<body> 中的JavaScript函数
【5月更文挑战第1天】<body> 中的JavaScript函数。
龙腾九州
30 3
兜里只有三分钱~
|
JavaScript
js随机更换背景图
js随机更换背景图
兜里只有三分钱~
47 0
coderJason2020
|
JavaScript 前端开发
[Javascript] 检测屏幕滑动方向
要使用 JavaScript 检测屏幕滑动方向，可以监听滚动事件 (scroll) 并与前一个滚动位置进行比较来确定滑动的方向。
coderJason2020
103 0
漏刻有时
touchslider.js插件高度自适应的解决方案
touchslider.js插件高度自适应的解决方案
漏刻有时
51 0
红目香薰
|
4月前
|
XML JavaScript 前端开发
Python之JavaScript逆向系列——4、Body
Python之JavaScript逆向系列——4、Body
红目香薰
47 0
海拥
|
4月前
|
JavaScript 前端开发 UED
探究: 为什么JavaScript要在body标签尾部引入?
探究: 为什么JavaScript要在body标签尾部引入?
海拥
47 0