小程序模板:专业的小程序模板与静态模板分享平台
小程序
教程
搜索
当前位置 : 首页> 小程序教程> 小程序图片的怎么设置宽高比缩放,mode的使用方法

小程序图片的怎么设置宽高比缩放,mode的使用方法

小程序中的图片模式有以下几种:


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;,表示在容器中居中。

联系客服 意见反馈

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了