记一次背景图更换

公司内部系统旧的背景图实在难看，也许最初很好看，但风树没动，心动了。

公司换显示器

旧的显示器，1920 * 1080，配合这个尺寸的图片正好，大概是这个样子

但今年随着疫情行业内的线下交易被叫停，我们作为线上业务量大增，加上夏天我们老大突然雄起一次，同事们统一换了小米 34寸曲面屏显示器，21：9 3440 * 1440，分辨率暴增，所以旧的图片就不合适了

死难看，所以为了前端的脸面（合法摸鱼），只好修改这里。

开始

最初只打算用 Css 解决，换一张高清图片，然后宽高都 100%

.bg {
  background: url("/static/images/logon_bg.jpg") no-repeat center;
  background-size: 100% 100%;
}

但这样在其他部门的同事的旧屏幕上会导致图片拉缩，有小人的图片就死难看，无奈为了兼容，修改 背景图伸缩比例

background-size: 100% auto;

但杠精同事又说，你这需求就不对，那人家调整窗口大小怎么办。

好吧，resize 起来

randomImg() {
  if (document.body.getBoundingClientRect) {
    window.addEventListener('resize', this.resize)
    this.resize()
  }
  let randomNum = Math.ceil(Math.random() * 9) || ''
  let bgImg = `/static/images/logon_bg${randomNum}.jpg`
  this.bgImg = bgImg
  this.getImg()
},
resize() {
  let bodySize = document.body.getBoundingClientRect()
  let w = bodySize.width
  let h = bodySize.height
  let flag = w / h > this.proportion && w > h

  let bgSize = flag ? '100% auto' : 'auto 100%'

  this.bgSize = bgSize
},
getImg() {
  let img = document.createElement('img')
  let randomNum = Math.ceil(Math.random() * 9) || ''
  img.src = `/static/images/logon_bg${randomNum}.jpg`
  let that = this
  img.onload = function () {
    that.proportion = img.width / img.height
    that.resize()
  }
},

直接贴结果了，要忙了。。。