uniapp小程序中背景图被拉伸问题如何解决?

站长

2024年06月30日 09:33 · 阅读数 10

.main{
  height: auto;
  background-size: 100% 100%;
  background-attachment: fixed;
  padding-bottom: 80px;
  background-image:url("xxxxx.png")
}

安卓下目前看没问题但是在ios下就上下拉伸 div内部的内容长度是动态长度

求教要怎么在小程序中兼容ios 安卓的展示图片不变形

1个回答

test

2024-06-30

把背景图放在滚动容器上，而不是内部的滚容区域上面。这样就不需要使用 background-attachment: fixed 属性了。

比如说你的DOM结构是这样的

<div class="layout">
  <div class="main">
    <div class="alert-item"></div>
  </div>
</div>

那么就给 layuout 设置 height:100vh 或者 height:100%，然后设置超出滚动 overflow: auto，这样滚动容器的高度就固定了。然后就是设置背景图了。

.layout {
   height: 100vh;
   background: url("xxxxx.png") center/cover no-repeat;
   overflow: auto;
}

适合作为回答的

不该作为回答的