一.问题描述
在使用Vue2开发移动端页面的时候，需要做一个效果，实现的方案是背景渐变，但是想要实现这个效果就必须进行定位，然后设置z-index让这个元素在其他元素的下面，我的背景高度需要在一个十分恰当的位置，在这个背景上面还有另外一张图片，但是我的图片会随着移动端页面的变化而发生高度的变化，为什么会变化哪？因为我设置了图片的宽度为100%这样就有可能导致，背景的位置在宽屏的情况下和UI差距比较大，所以我需要获取图片的高度，然后在这个高度上增加合适的高度就可以在任何屏幕中自适应，但是无论我在mounted中如何获取，甚至在$nextTick中获取到的图片高度都是0，导致一直无法实现自己想要的效果，以上描述的效果基本如下：
二.问题分析
出现这个问题的点在于，进行背景设置的元素，是定位的，所以脱离了标准流，导致它的高度无法被撑起来，并且也不能撑起来，因为它的高度是一个比较特殊的高度，所以只能进行定位，但是又因为图片的高度变化，导致背景一个固定的值不能满足要求，解决方案是动态获取图片的高度然后相应的去设置背景元素的高度，比较坑的地方就在于直接在mounted和$nextTick中拿不到高度，原因在于图片未加载完成，所以需要在图片完全加载后进行后续的处理。
三.问题解决
解决方案一： 使用JS的方式进行获取图片高度，在图片高度的基础上动态设置背景高度。
methods: {
handleImageLoad(event) {
const height = event.target.offsetHeight;
this.height1 = height + 120;
},
getPicHeight() {
this.height1 = this.$refs.myPictrue.offsetHeight + 120;
},
},
mounted() {
window.addEventListener("resize", () => {
this.getPicHeight();
});
},
beforeDestroy() {
window.removeEventListener("resize", this.getPicHeight);
},
解决这个问题的方法就是使用 @load="handleImageLoad"当图片加载完毕之后就会直接出发这个方法中的逻辑进行处理，然后获取高度来让背景跟随图片高度进行变化。
解决方案二： 手动计算图片比例，使用vw进行动态计算。
.img {
width: 100vw;
height: 40vw;
position: relative;
z-index: 9;
background-color: red;
}
.img-bg {
width: 100vw;
position: absolute;
top: 0;
left: 0;
height: calc(40vw + 120px);
background-color: green;
}
四.问题总结
这个问题其实本质原因还是对不同内容加载完成时机不够清楚，因为在开发过程中有时候确实不太会去考虑拿到图片的高度，但是其实使用vw来解决这个问题其实是更好的，它的缺点在于需要自己去计算宽高比，但是本着不写代码就不会有bug的原则，能够尽量使用纯CSS解决的问题就用纯CSS来解决。
