<div class="bg_picWrapper" :style="{backgroundImage:'url('+img+')'}">------------vue中動態綁定背景圖片顯示的方式
<div class="bg_pic"></div>
</div>
在項目中我們經常會跟圖片打交道，遇到顯示圖片的需求，我們大多數人的做法通常都是用<img>（在小程序中用<image>）標簽，利用這個標簽的src屬性綁定圖片顯示；但是這樣會出現一個問題：就是圖片的顯示是否會等比例顯示且不會出現圖片的拉伸（或者壓縮）效果？如果你對圖片等比例顯示不是特別清楚，那么你會遇到一個問題：ui給的設計圖中圖片是完整顯示，而你做出來的頁面中，圖片會出現拉伸壓縮的效果，也許你會到網上找插件，這個裁剪能夠滿足將圖片按給定的框框裁剪，這樣就不用擔心圖片顯示的問題了？真的嗎？那我只能說你這是有點殺雞用牛刀，小題大作了。為什么這么說？
關於圖片的寬度與高度的賦值我們知道有兩種方式：1、直接在css中設置圖片的的width、height屬性，2、在js中設置圖片的style.width。不過我這個人一致都覺得能夠用css解決的問題就不要用js來解決，所以我會選第一種方式：直接在css中設置圖片的width、height值。為什么要在css中設置圖片的width、height值呢？因為在css中，如果設置圖片的width、height中的一個值，會將圖片等比例縮放，並且不會出席那那所謂的壓縮與拉伸問題。而且我們要的不就是這種效果嗎？所以這種方式離我們要的效果又進了一步。但是這還不夠，我們需要的不僅是圖片不拉伸壓縮，還要圖片你能夠絕大部分都可以在給定的框框內顯示出來，圖片的絕大部分顯示出來，也就是說可以有一次部分是可以被遮住的了？css的圖片圖片不就有這種尺寸的屬性嗎！background-size:cover/contain。代碼如下：
.bg_pic{
width:100%;
height:100%;
background-position: center center;
background-repeat: no-repeat;
background-size:cover;
-webkit-background-size:cover;
-moz-background-size:cover;
}
如果你直接拿着這個代碼去試，這還存在着一點小問題：就是背景圖片沒有完全顯示在bg_picWrapper框中，將height:100%;改為height:0;padding-bottom:100%即可；
可能自己經驗尚淺。如果有不同的意見或者有更好的解決方法可以在下面留下您最寶貴的建議或者解決方式，歡迎交流