昆明网站排名优化价格,电子商务这个专业好吗,建立平台网站要多久,wordpress注册表文件夹今天学习微信小程序开发的image组件#xff0c;mode属性的属性值不少#xff0c;一开始有点整不明白。后来从网上下载了一张图片#xff0c;把每个属性都试验了一番#xff0c;总算明白了。现总结归纳如下#xff1a;
1.使用scaleToFill。这是mode的默认值#xff0c;sc…今天学习微信小程序开发的image组件mode属性的属性值不少一开始有点整不明白。后来从网上下载了一张图片把每个属性都试验了一番总算明白了。现总结归纳如下
1.使用scaleToFill。这是mode的默认值scaleToFill会让图片变形效果见下图但是图片能完整显示。
image src/images/luban.jpg modescaleToFill / 2.使用aspectFit属性值实现image组件在保持图片宽高比不变的情况下使图片长边能够完全显示出来图片完整显示图片不变形。这里都是和默认值scaleToFill作对比。
image src/images/luban.jpg modeaspectFit / 3.使用aspectFill属性实现image组件在保持图片宽高比不变的情况下使图片短边能够完全显示出来另一边不完整显示。这里可以看到鲁班的头部没有显示完整图片不变形。
image src/images/luban.jpg modeaspectFill / 4.使用widthFix属性image组件保持图片宽高比不变的情况下图片宽度不变高度自动变化图片完整显示。
image src/images/luban.jpg modewidthFix / 5.使用heightFix属性image组件保持图片宽高比不变的情况下图片高度不变宽度自动变化。图片完整显示。高度定了宽度由高度决定也就是图片不变形等比例变化。图片整体看上去比上一张图片4小。
image src/images/luban.jpg modeheightFix / 下面是mode取值为top、bottom、center、left、right等我也逐一做了验证这里没有什么不好理解的。以top和bottom left为例效果图如下。
image src/images/luban.jpg modetop / image src/images/luban.jpg modebottom right / 都说实践出真知感觉有一些懵懵懂懂模糊不清的地方自己动手实践一下基本就会理解。
