CSS背景图预留放置位适配

黄粱一梦2024-10-080

需求

活动页，现有一张做好的宣传图只需要将此图作为背景然后整页显示如下图所示

素材图

[ ] 现在，需要将加载的二维码适配放置到预留的空白位置

实现思路

因为要保证在不同的设备上面进行完美的贴合效果,所以自然不会考虑使用px这种单位,所以我的思路是使用vw这种可以根据不同屏幕的宽度去进行适配的高度单位.

具体实现思路

左右定位居中的话是比较好做的主要是在上下的定位上面，所以使用padding-top,padding-bottom来将可用的位置压缩压缩到只剩下中间预留位置即可。那如何压缩呢？答案是使用vw，我们可以先根据图片进行计算当前预留位置与整张图的占比与高度的占比,如下所示.

根据上面的计算可以得出距离顶部的比例为0.9464...所以换算vw应该是94.64vw,距离底部是0.892换算之后是89.2vw使用代码可以表示为padding-top: 94.64vw;padding-bottom: 89.2vw;

代码

<!--subPages/pages/joinGroup.wxml-->
<view class="join-group-page">
    <statusBar></statusBar>
    <view style="height:{{pageHeight}}" class="join-group-container">
        <!-- <image class="qr-img" src="https://pic.baike.soso.com/p/20130307/20130307133541-2131676630.jpg" mode=""/> -->
        <view class="qr-box">
         <image show-menu-by-longpress="1" class="qr-instance" src="https://tse1-mm.cn.bing.net/th/id/OIP-C.xu6cwmvf9HQPqYiDpNsF8wAAAA?rs=1&pid=ImgDetMain" alt="" srcset=""/>
        </view> 
    </view>
</view>

/* subPages/pages/joinGroup.wxss */

.join-group-container {
    width: 100%;
    background-image: url("https://www.helloimg.com/i/2024/10/07/6703ce2534de4.png");
    background-size: 100%;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-position: top center;
    position: relative;
    /* overflow-y: scroll; */
    /* padding: 10.64vw auto 11.15vw 0px; */
    padding-top: 94.64vw;
    padding-bottom: 89.2vw;
    /* padding-left: ; */
}

.qr-box {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    width: 50vw;
    height: 50vw;
    box-sizing: border-box;
    padding: 5px;
    background-color: #fef8ce;
}

.qr-instance {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

// subPages/pages/joinGroup.js
const app = getApp()
Page({

    /**
     * 页面的初始数据
     */
    data: {
        pageHeight:''
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        this.setData({
            pageHeight : `calc(100vh - ${app.globalData.system.navigateHeight}px)`
        })
    },

    // longPressHandler: function(e) {
    //     wx.scanCode({
    //       scanType: ['qrCode'],
    //       success: function(res) {
    //         console.log(res.result);
    //       }
    //     });
    //   },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {

    }
})