DIV根据浏览器大小自适应位置

lmkght 2019-12-12 06:23:18




我的背景图已经是随着浏览器大小而自适应大小的了
绿色的div也可以根据浏览器大小调整自己的大小
但是现在我想让绿色的框在背景图中白色条的位置上
也需要随着浏览器大小而改变位置
有大佬可以提供一下解决办法么,目前使用的是百分比还是不行
代码大致如下:



...全文
351 7 打赏 收藏 转发到动态 举报
写回复
用AI写文章
7 条回复
切换为时间正序
请发表友善的回复…
发表回复
sxty0220 2019-12-16
  • 打赏
  • 举报
回复
用vh单位试试看
lmkght 2019-12-13
  • 打赏
  • 举报
回复
引用 1 楼 天际的海浪 的回复:
用 vw 和 vh 为单位试试
vh居然可以 感谢大佬
lmkght 2019-12-13
  • 打赏
  • 举报
回复
引用 3 楼 haha.html 的回复:
你绿色盒子定位在那个位置,但是绿色盒子的大小要随着平铺缩小而缩小,可以试试。你已经提到了你的大小都是一起变化,定位在白色盒子那个位置应该不会影响
绿盒子的大小是我根据原图1920*1080的比例计算的百分比 这样就可以使他和百盒子的高度一样了 绿盒子的定位也是根据原图比例计算的百分比 但缩放浏览器的过程中还是会跑掉 仅有一两个固定分辨率的时候才会在白盒子的位置
lmkght 2019-12-13
  • 打赏
  • 举报
回复
引用 2 楼 Mafia 的回复:
父级width和height是100%。子盒子在固定比例位置,并且显示窗口不一。 这情况用CSS应该不容易做到。 用JS根据当前显示窗口比例,再根据你图片原始尺寸的比例,和你白条的位置比例计算试试。
父级就是body body目前宽高是100%的 定位的比例是我根据原图1920*1080的比例计算的百分比,但是绿盒子还会跑掉,也尝试过js控制,但是最多也就是控制到固定的比例尺寸,比如800*600 的时候我就用js换绿盒子的定位,1366*768的时候再换一次 但是若是数值在这两个分辨率之间的时候绿盒子就还是跑掉的
haha.html 2019-12-13
  • 打赏
  • 举报
回复
你绿色盒子定位在那个位置,但是绿色盒子的大小要随着平铺缩小而缩小,可以试试。你已经提到了你的大小都是一起变化,定位在白色盒子那个位置应该不会影响
daswcszxw 2019-12-12
  • 打赏
  • 举报
回复
父级width和height是100%。子盒子在固定比例位置,并且显示窗口不一。 这情况用CSS应该不容易做到。 用JS根据当前显示窗口比例,再根据你图片原始尺寸的比例,和你白条的位置比例计算试试。
天际的海浪 2019-12-12
  • 打赏
  • 举报
回复
用 vw 和 vh 为单位试试

61,110

社区成员

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧