微信小程序-image标签

demo.wxml

<!-- 
  image 图片标签
  1 src 指定要加载的图片的路径
    图片存在默认的宽度和高度 320 * 240   原图大小是 200 * 100
  2 mode 决定 图片内容如何 和 图片标签 宽高 做适配
    1 scaleToFill 默认值 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
    2 aspectFit 保持宽高比 确保图片的长边 显示出来 页面轮播图 常用
    3 aspectFill 保持纵横比缩放图片，只保证图片的 短 边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取 少用 4 widthFix 缩放模式，宽度不变，高度自动变化，保持原图宽高比不变 常用
    5 bottom ... 类似以前的 background-position
  3 小程序当中的图片 直接就支持 懒加载 lazy-load
    1 lazy-load 灰自己判断当 图片 出现在 视口 上下 三屏的高度 之内的时候 自己开始加载图片
 -->
 <image mode="aspectFit" lazy-load src="https://ae01.alicdn.com/kf/H614aa185b5cc49c087d71e7fddead4bcH.png"></image>

demo.wxss

image{
  box-sizing: border-box;
  border: 1px solid red;

  width: 300px;
  height: 500px;
}

示例

微信小程序-image标签_宽高