- 小程序
当涉及到微信小程序中图片的自适应时，除了使用 mode 属性来控制图片的展示方式，还可以使用 CSS 样式来实现。以下是两种方法的代码示例：
方法一：使用 mode 属性为 aspectFill
通过将 mode 属性设置为 aspectFill，可以保持图片的原始比例，同时填充并裁剪以适应容器。
使用image做背景图，宽设100%，使用mode属性下的widthfix。
mode值 说明
scaleToFill （默认值）缩放形式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
aspectFit 缩放模式，保持纵横比缩放图片，使图片的短边能完全显示出来。也就是说，可以完整的将图片显示出来
aspectFill 缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
widthFix 缩放模式，宽度不变，高度自动变化，保持原图宽高比不变。
hightFix 缩放模式，高度不变，宽度自动变化，保持原图宽高比不变。
————————————————
方法二：使用 CSS 样式
/* 在对应的 wxss 文件中 */
.image-container {
width: 100%;
height: 0;
padding-bottom: 100%; /* 保持宽高比 1:1，可根据需要调整 */
position: relative;
}
.image-container image {
width: 100%;
height: 100%;
object-fit: cover;
}通过将图片放置在一个容器中，然后使用 CSS 样式来实现图片的自适应。将容器的高度设置为 0，并使用 padding-bottom 属性来保持容器的宽高比，然后将图片的宽度和高度设置为 100%，并使用 object-fit 属性将原始图片填充到容器中。
这两种方法都可以实现图片的自适应、不压缩和不变形，以达到原图填充的效果。你可以根据自己的需求选择其中一种方法来使用。
