起因

最近在做一个官网的效果的时候，出现了背景图过大，导致不同显示器显示的图片大小不一样，和影响下面内容的布局问题。所以记录一下这个坑。

用到的知识

css3

background-position:指定背景图像位置 background-size:指定背景图像的大小

js

onresize:当窗口大小发生变化时触发某一段代码

分析

问题

• 遇到的问题是，1.图片不能根据不同的显示器(不同的窗口大小)，调整最佳的大小而显示。2.背景图的容器不能根据不同的显示器(不同的窗口大小)，调整自身大小，导致影响下面内容的布局。

解决

• 第一个问题可以通过上述提到的两个css的属性来做，第二个问题通过获取背景容器的宽度，再根据图片的比例，来计算适合的高度即可。

代码演示

CSS

/* 设置背景容器样式 */
.banner {
  width: 100vw;
  /* 最大宽度为图片本身宽度 */
  max-height: 520px;
  /* 最大高度为图片最大高度 */
  max-width: 1920px;
  background: url("./banner1.png") no-repeat;
  /* 设置图片位置 为容器 居中 顶部 */
  background-position: center top;
  /* 设置图片一直以合适的比例在容器中显示 */
  background-size: contain;
}

HTML

<div class="banner" id="banner"></div>

JS

let changeH = function () {
  let banner = document.querySelector("#banner");
  // 获取banner的宽度
  let width = banner.clientWidth;
  // 计算图片宽高比例
  let prop = parseInt(1920 / 520);
  // 获取当前宽度下合适的高度
  let height = parseInt(width / prop);
  // 设置容器高度
  banner.style.height = height + "px";
};
// 初始化容器高度
let init = function () {
  changeH();
};
init();
// 监听窗口大小变化 一旦变化就触发内部的函数
window.onresize = function () {
  changeH();
};

在Vue中使用

可以在组件的mounted中使用onresize事件，在通过this.$refs来获取到你的容器，然后操作就是一样了