微信小程序开发之 image 图片保持宽高比自动缩放高度

2017-06-16 本文已影响1794人无沣

初始情况下，我们给 image 设置了宽度后，发现高度并不像 HTML 中一样自动缩放，好吧，我们试着设置 height:auto;，现在倒好，图片都看不到了。

难道微信小程序中不能保持图片的宽高比？

不是得。我们为 image 标签设置

注意：如何使用了这个模式，那么在 .wxss 中为图片设置的 height 将无效。

所以有时候我们也可以用这几种模式：

scaleToFill不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素

aspectFit保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。

aspectFill保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。