代码

作者: C_G__ | 来源:发表于2019-08-29 17:42 被阅读0次

图片

/*
scaleToFill{
        background-size:100% 100%;//不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
    }
    aspectFit{
        background-size:contain;//保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
    }
    aspectFill{
        background-size:cover;//保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
    }
mode 式样书中没找到对应属性。不知道有没有？
*/
.image {
  display: flex;
  width: 100%;
  height: 75vw;  /* 表示 height是width的75%，还有xx vh*/
  /*图片居中 填充*/
  vertical-align: middle;
  object-fit: cover; 
}
<image src="{{item}}" class="image" mode="aspectFill"></image>