Skip to content

Instantly share code, notes, and snippets.

@zhangkn

zhangkn/image.xml

Last active May 25, 2018 03:12
Show Gist options
  • Save zhangkn/2edda91c86c2a538f66d41f6c64a9cfc to your computer and use it in GitHub Desktop.
Save zhangkn/2edda91c86c2a538f66d41f6c64a9cfc to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. zhangkn revised this gist May 25, 2018. 1 changed file with 3 additions and 0 deletions.
    3 changes: 3 additions & 0 deletions image.xml
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,3 @@

    <image mode="widthFix" class="-icon" src="../assets/images/icons/_bg.png"></image>

  2. zhangkn renamed this gist May 25, 2018. 1 changed file with 0 additions and 0 deletions.
    0 mode,md → mode.md
    View file
    File renamed without changes.
  3. zhangkn created this gist May 25, 2018.
    77 changes: 77 additions & 0 deletions mode,md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,77 @@
    <p>mode 有 13 种模式，其中 4 种是缩放模式，9 种是裁剪模式。</p>
    <table>
    <thead>
    <tr>
    <th>模式</th>
    <th>值</th>
    <th>说明</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>缩放</td>
    <td>scaleToFill</td>
    <td>不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素</td>
    </tr>
    <tr>
    <td>缩放</td>
    <td>aspectFit</td>
    <td>保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。</td>
    </tr>
    <tr>
    <td>缩放</td>
    <td>aspectFill</td>
    <td>保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。</td>
    </tr>
    <tr>
    <td>缩放</td>
    <td>widthFix</td>
    <td>宽度不变，高度自动变化，保持原图宽高比不变</td>
    </tr>
    <tr>
    <td>裁剪</td>
    <td>top</td>
    <td>不缩放图片，只显示图片的顶部区域</td>
    </tr>
    <tr>
    <td>裁剪</td>
    <td>bottom</td>
    <td>不缩放图片，只显示图片的底部区域</td>
    </tr>
    <tr>
    <td>裁剪</td>
    <td>center</td>
    <td>不缩放图片，只显示图片的中间区域</td>
    </tr>
    <tr>
    <td>裁剪</td>
    <td>left</td>
    <td>不缩放图片，只显示图片的左边区域</td>
    </tr>
    <tr>
    <td>裁剪</td>
    <td>right</td>
    <td>不缩放图片，只显示图片的右边区域</td>
    </tr>
    <tr>
    <td>裁剪</td>
    <td>top left</td>
    <td>不缩放图片，只显示图片的左上边区域</td>
    </tr>
    <tr>
    <td>裁剪</td>
    <td>top right</td>
    <td>不缩放图片，只显示图片的右上边区域</td>
    </tr>
    <tr>
    <td>裁剪</td>
    <td>bottom left</td>
    <td>不缩放图片，只显示图片的左下边区域</td>
    </tr>
    <tr>
    <td>裁剪</td>
    <td>bottom right</td>
    <td>不缩放图片，只显示图片的右下边区域</td>
    </tr>
    </tbody>
    </table>