APP開發，發布動態、朋友圈類似，多張圖片動響應式正方形展示布局 vue.js，aui.css，apicloud

環境：vue.js，aui.css，apicloud

 

1.沒做控制之前。圖片真實長度寬度。

 

 

 

 

2.下面用js控制高度

js部分

//js 部分 
//先動態的獲取屬性寬度
var box4_col3 = document.getElementsByClassName("aui-col-xs-4")[0];
vm.col3 = window.getComputedStyle(box4_col3).width;

//vue綁定數據
var vm = new Vue({
     el: '#app',
     data: {
         col3:'',
      }
}）

 

css部分

  <div class="aui-col-xs-4" v-for="(img, index) in item.for_img"   v-bind:style=" 'overflow:hidden; height:' + col3 ">
         <img :src="xxxx" onclick="open_img_big( item.for_img, index )"/>
</div>

 控制后 長大於寬的部分自動隱藏，但是寬大於長的會有空白顯示

 

 

 

3.給定義 寬高100%，圖片形變壓縮了

                            <div class="aui-col-xs-4" v-for="(img, index) in item.for_img"
                                 v-bind:style=" 'overflow:hidden; height:' + col3 ">
                                <img :src="qiniu + img.qiniu_img" width="100%" height="100%"
                                     onclick="open_img_big( item.for_img, index )"/>
                            </div>

 

 

4.調了很久，發現七牛雲有縮略圖配置

我的后台圖片保存用到了七牛雲存儲，在七牛圖片加上后綴 自動居中裁剪成 正方形

?imageView2/1/w/300/h/300/q/80|imageslim

以上完美顯示！！！