动态设置背景图容器大小

起因

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

用到的知识

css3

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

js

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

分析

问题

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

解决

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

代码演示

CSS

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

HTML

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

JS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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来获取到你的容器,然后操作就是一样了


本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!