动态设置背景图容器大小

起因

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

用到的知识

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来获取到你的容器，然后操作就是一样了