【微信小程序】image组件的4种缩放模式与9种裁剪模式

在这里插入图片描述

🏆今日学习目标：第九期——image组件的4种缩放模式与9种裁剪模式 😃创作者：颜颜yan_ ✨个人主页：颜颜yan_的个人主页 ⏰预计时间：20分钟 🎉专栏系列：微信小程序开发

文章目录

• 前言
• 缩放模式
  • scaleToFill
  • aspectFit
  • aspectFill
  • widthFix
• 剪裁模式
  • top
  • bottom
  • center
  • left
  • right
  • top left
  • top right
  • bottom left
  • bottom right
• 总结

前言

哈喽大家好，本次是微信小程序专栏的第九期。在项目中，我们经常要面对图片的尺寸结合设计图的尺寸不同的情况。在这种情况下，我们必须要有所舍弃，或放弃等比例，或裁剪掉图片的一部分。本期的主要内容是image组件的4种缩放模式与9种裁剪模式。 注意：每期内容是连载呢，建议大家可以看看往期内容，更好理解噢~

每种模式的字面意思都很好理解。要更改图片的裁剪或缩放模式，只需要给image组件加上一个mode属性值。

缩放模式

scaleToFill

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

如下，当我们添加sacleToFill模式时，图片并没有发生任何变化。这是因为sacleToFill是缩放的默认模式，如果省略了mode，则小程序也会以sacleToFill的模式来缩放图片。 sacleToFill将改变图片的高宽比，强行让图片更改为样式指定的尺寸，使图片变形。当然，如果原始图片的宽高比例和要缩放的目标宽高比例相同，则不会变形，只是整体上放大或缩小了。

在这里插入图片描述

在这里插入图片描述

aspectFit

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

假设有一个容器（这个容器的宽高就是设置的样式），要将图片放进去。而aspectFit的特点就是保持图片不变形，且容器要“刚好”将这个图片装进去。如果原始图片比容器大，就要被等比例缩小；如果原始图片比容器小，就会被等比例放大。一直放大或缩小到图片的某一条边刚好和容器的一条边重合。 如下，原始图片大于容器，就会被等比例缩小。

在这里插入图片描述

在这里插入图片描述

aspectFill

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

这个模式同样保持图片的高宽比不会变形，但会让图片完全填满整个容器。如果原始图片尺寸大于容器，则需要等比例缩小，一边刚好接触容器，另外一边等于或超出容器，这样就可以完全填满了。

在这里插入图片描述

在这里插入图片描述

widthFix

宽度不变，高度自动变化，保持原图宽高比不变。

这个属性的特点是，图片不会按照设定的尺寸呈现，而是让宽缩放到指定尺寸，再动态计算高度。

在这里插入图片描述

在这里插入图片描述

剪裁模式

top

不缩放图片，只显示图片的顶部区域。

这个模式只保留了图片的上部，裁剪掉了剩余部分。如下可以发现，图片不仅裁掉了下面的部分，水平方向上也有裁剪，是由于这个模式不会缩放图片，所有我们设置的容器不能够在水平方向上完全把图片放进去，进而水平方向上也发生了裁剪。

在这里插入图片描述

在这里插入图片描述

bottom

不缩放图片，只显示图片的底部区域。

在这里插入图片描述

在这里插入图片描述

center

不缩放图片，只显示图片的中间区域。

在这里插入图片描述

在这里插入图片描述

left

不缩放图片，只显示图片的左边区域。

在这里插入图片描述

在这里插入图片描述

right

不缩放图片，只显示图片的右边区域。

在这里插入图片描述

在这里插入图片描述

top left

不缩放图片，只显示图片的左上边区域。

在这里插入图片描述

在这里插入图片描述

top right

不缩放图片，只显示图片的右上边区域。

在这里插入图片描述

在这里插入图片描述

bottom left

不缩放图片，只显示图片的左下边区域。

在这里插入图片描述

在这里插入图片描述

bottom right

不缩放图片，只显示图片的右下边区域。

在这里插入图片描述

在这里插入图片描述

总结

以上就是今天的学习内容啦~ 如果有兴趣的话可以订阅专栏，持续更新呢~ 咱们下期再见~