小程序中的图片模式有以下几种:
aspectFit:保持宽高比缩放图片,使图片的长边能完全显示出来。
aspectFill:保持宽高比缩放图片,使图片的短边能完全覆盖容器。
widthFix:宽度不变,高度自动变化,保持原图宽高比不变。
top:在容器中竖直居中,横向靠顶部对齐。
bottom:在容器中竖直居中,横向靠底部对齐。
center:在容器中居中。
不同的模式适用于不同的场景,如需要完整显示图片时可以使用 aspectFit,需要填充整个容器时可以使用 aspectFill,
需要固定宽度时可以使用 widthFix 等。
在小程序中,图片模式是通过 CSS 样式来实现的。不同的模式对应不同的 CSS 属性。
aspectFit 模式对应的 CSS 属性为 object-fit: contain;,表示保持宽高比缩放图片,使图片的长边能完全显示出来。
aspectFill 模式对应的 CSS 属性为 object-fit: cover;,表示保持宽高比缩放图片,使图片的短边能完全覆盖容器。
widthFix 模式对应的 CSS 属性为 width: 100%; height: auto;,表示宽度不变,高度自动变化,保持原图宽高比不变。
top 模式对应的 CSS 属性为 object-position: center top;,表示在容器中竖直居中,横向靠顶部对齐。
bottom 模式对应的 CSS 属性为 object-position: center bottom;,表示在容器中竖直居中,横向靠底部对齐。
center 模式对应的 CSS 属性为 object-position: center center;,表示在容器中居中。