一.問題描述
在使用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來解決。
