vue中怎么实现当窗口宽度变化时，背景图片始终是在正中间的视角

现在做完适配之后，当页面宽度变化后，背景图片不会被压缩了但是怎么让图片中心无论页面宽度多大它始终在中间

类似于这样，不管屏幕怎么变化，悟空始终是在中间的位置

有个object-position属性

• 帮你找了个相似的问题, 你可以看下: https://ask.csdn.net/questions/7698005
• 这篇博客你也可以参考下：记一次vue遇到的坑，表格发送添加或删除请求并重新请求数据，发现数据并没有同步刷新。
• 除此之外, 这篇博客: vue中关键字的搜索，输入关键字列表和分页一起刷新中的 接着上篇文章，这个是关键字的搜索，输入关键字进行搜索的时候，列表的数据和分页跟着一起改变 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

• <template>
    <div class="all">
       <div class="top">
        <el-input
          placeholder="输入检索的关键字"
          size="medium"
          v-model="searchForm.contentName"
          @keyup.enter.native="search"
        >
          <template #suffix>
            <i class="el-icon-search el-input__icon" @click="getListTable(1)"/>
          </template>
        </el-input>
      </div>
      <div class="mid">
        <el-table
          @row-dblclick="dbClickDetail"
          :data="tableData"
          class="jk-table"
          style="width: 100%"
        >
          <el-table-column type="index" align="center" label="序号"></el-table-column>
          <el-table-column prop="checkContentName" align="center" label="检查内容"></el-table-column>
          <el-table-column prop="checkNum" align="center" label="检查项数量"></el-table-column>
          <el-table-column prop="itemNum" align="center" label="标准条款数量"></el-table-column>
        </el-table>
      </div>
      <div class="footer">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="searchForm.pageIndex"
          :page-sizes="[15,30,45,60]"
          :page-size="searchForm.pageSize"
          layout="total, prev, pager, next, jumper"
          :total="totalCount"
        ></el-pagination>
      </div>
    </div>
  </template>
  
  <script>
  import { getQualitySafetyItems } from "@/services/index";
  export default {
    data(){
      return{
        searchForm:{
          pageIndex: 1, //默认页码是第一页
          pageSize: 15, //默认显示的条数
          contentName: "" //关键字
        },
         totalCount: 0,
        
      },
      methods:{
        //获取列表
        getListTable(){
          getQualitySafetyItems(this.searchForm).then(({data,totalCount})=>{
            this.tableData = data;
            this.totalCount = totalCount
          })
        },
         //搜索关键字
      search() {
        this.searchForm.pageIndex = 1; //初始化当前所在页数
        this.getListTable(); //获取数据
      },
         // 每条条数变化的回调处理
        handleSizeChange(val){
          // val变化后的每页的条数
          this.searchForm.pageSize = val;//更新每页的条数
          this.getListTable();//重新获取列表数据
        },
        // 页码变化的回调处理
        handleCurrentChange(val){
          //val 变化后的页码
          this.searchForm.pageIndex = val;
           this.getListTable();//重新获取列表数据
        }
      }
    }
  }
  </script>
  <style lang="scss" scoped>
  .top {
      .el-button {
        font-size: 15px;
        margin: 30px 40px 20px 30px;
      }
  .jk-table{
    color:#ccc
  }
  .footer {
      margin-top: 20px;
      text-align: right;
  }
  </style>
  

  
  效果图如下：