4種縮放模式
scaleToFill 不保持縱橫比例縮放圖片，使圖片的高度完全拉伸至填滿image元素
         此模式是縮放的預設模式，預設時，小程式以此模式來縮放圖片
aspectFit 保持縱橫比縮放圖片，使圖片的長邊能完全顯示出來
        也就是說，可以完整地將圖片顯示出來
aspectFill 保持橫縱比縮放圖片，只保證圖片的短邊能完全顯示出來
         也就是說，圖片通常只在水平或垂直方向是完整的，另一方向將會發生擷取
widthFix 寬度不變，高度自動變化，保持原圖寬高比不變

我們在post.wxmlimage元件下新增縮放模式，程式碼如下

 <image class="post-image" src="/../images/post/post-7.jpg" mode="widthFix" ></image>

模式可自行決定，儲存並執行效果如下：

9種剪裁模式
top 不縮放圖片，只顯示圖片的頂部區域
bottom 不縮放圖片，只顯示圖片的底部區域
center 不縮放圖片，只顯示圖片的中間區域
left 不縮放圖片，只顯示圖片的左邊區域
right 不縮放圖片，只顯示圖片的右邊區域
top left 不縮放圖片，只顯示圖片的左上角區域
top right

我們同樣在post.wxmlimage元件下新增裁剪模式，程式碼如下

<image class="post-image" src="/../images/post/post-7.jpg" mode="top" ></image>

靜態文章列表

在post.wxml中重複複製文章程式碼，若CSS程式碼編寫足夠健壯，可迅速新增文章，且樣式不會錯亂

<view>  <!--作為整個網頁的容器-->
  <swiper indicator-dots="ture" autoplay="true" interval="5000" circular="true" vertical="{{false}}"> 
    <swiper-item>
      <image src="../../images/post/post-1.jpg"></image>
    </swiper-item>
    <swiper-item>
      <image src="../../images/post/post-2.jpg"></image>
    </swiper-item>
    <swiper-item>
      <image src="../../images/post/post-3.jpg"></image>
    </swiper-item>
  </swiper>
</view>

<view class="post-container">
  <view class="post-author-date">
    <image src="../../images/avatar/avator-3.jpg" ></image>
    <text> Dev 21 2018</text>
  </view>
  <text class="post-title">最近比較忙....</text>
  <image class="post-image" src="/../images/post/post-7.jpg" mode="aspectFit" ></image>
  <text class="post-content">佛說，一念三千。一念起，萬水千山;一念滅，滄海桑田。一念執著，生死疲勞;一念放下，萬般自在....
  </text>
  <view class="post-like">
    <image src="../../images/icon/wx_app_collect.png"></image>
    <text>108</text>
    <image src="../../images/icon/wx_app_view.png"></image>
    <text>92</text>
    <image src="../../images/icon/wx_app_message.png"></image>
    <text>7</text>
  </view>
</view>

<view class="post-container">
  <view class="post-author-date">
    <image src="../../images/avatar/avator-1.jpg" ></image>
    <text> Dev 21 2018</text>
  </view>
  <text class="post-title">不知道寫點啥....</text>
  <image class="post-image" src="/../images/post/post-10.jpg" mode="aspectFit" ></image>
  <text class="post-content">當陣陣風聲，把我喝醉的靈魂喚回，凝聚成如今孤獨的身軀時，再也無能為力去追尋舊日步伐的我，又該怎樣尋味那時斑斕。當片片落葉點綴著眼前模糊的視野，我更不知道這是寒冷滋味，還是柔暖的飽和，亦或是麻木的無動於忠....
  </text>
  <view class="post-like">
    <image src="../../images/icon/wx_app_collect.png"></image>
    <text>1008</text>
    <image src="../../images/icon/wx_app_view.png"></image>
    <text>920</text>
    <image src="../../images/icon/wx_app_message.png"></image>
    <text>72</text>
  </view>
</view>

<view class="post-container">
  <view class="post-author-date">
    <image src="../../images/avatar/avator-4.jpg" ></image>
    <text> Dev 21 2018</text>
  </view>
  <text class="post-title">網上下載了點東東....</text>
  <image class="post-image" src="/../images/post/post-11.jpg" mode="aspectFit" ></image>
  <text class="post-content">千年夢，彈指間，往事如水淡如煙。曲以終，人亦散，舊夢初醒已千年....
  </text>
  <view class="post-like">
    <image src="../../images/icon/wx_app_collect.png"></image>
    <text>18</text>
    <image src="../../images/icon/wx_app_view.png"></image>
    <text>111</text>
    <image src="../../images/icon/wx_app_message.png"></image>
    <text>17</text>
  </view>
</view>