2:修改图片尺寸 - 《广于固志学习笔记》

margin: 0 auto实现图片水平居中

微信image资源：图片自适应方法

一开始使用文字进行测试，可以使得文字进行居中，但是将文字转换为图片以后，由于图片太大，无法确定是否居中。

<View className='at-row'>
        <View className='at-col'><Image className='small' src='http://placekitten.com/g/64/64'></Image></View>
        <View className='at-col'><Image className='small' src='http://placekitten.com/g/64/64'></Image></View>
        <View className='at-col'><Image className='small' src='http://placekitten.com/g/64/64'></Image></View>
      </View>

对 image的className进行CSS修饰

.small {
        width: 100%;
        height: 80rpx;
    }

发现还是无法修改大小，网络查询了 image的自适应方法，最后选择了aspectFit 方法。

模式	值	说明
缩放	scaleToFill	不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
缩放	aspectFit	保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
缩放	aspectFill	保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
缩放	widthFix	宽度不变，高度自动变化，保持原图宽高比不变
裁剪	top	不缩放图片，只显示图片的顶部区域
裁剪	bottom	不缩放图片，只显示图片的底部区域
裁剪	center	不缩放图片，只显示图片的中间区域
裁剪	left	不缩放图片，只显示图片的左边区域
裁剪	right	不缩放图片，只显示图片的右边区域
裁剪	top left	不缩放图片，只显示图片的左上边区域
裁剪	top right	不缩放图片，只显示图片的右上边区域
裁剪	bottom left	不缩放图片，只显示图片的左下边区域
裁剪	bottom right	不缩放图片，只显示图片的右下边区域

选择了mode 的 aspectFit ，发现还是无法运行，去 node modules/taro-ui/dist/weapp/avatar/index.js 查找，发现没有是 className的方法没有生效，怀疑是 image没有定义，

import { View, Image } from '@tarojs/components'

引用了 Image 组件，发现html报错了，image首字母没有大写！！！
具体原因：JS不支持 Image 方法，需要react 的 Image变式才可以，所以需要引用 Image 组件。
改为大写后，程序运行成功。但是图片整体在最上面。尝试了第一种方法

  .small {
        width: 100%;
        height: 80rpx;
        text-align: center;//水平居中
        position: absolute;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);}//后四行是垂直居中

transform:translate(-50%,-50%) 的含义是，有些框架可能会超出屏幕，没有这句话是只位于框架的水平垂直居中，不一定是屏幕的水平垂直居中，有了这句话会把框架和屏幕进行重合，使得位于屏幕和框架的水平垂直居中。
将水平和垂直居中放在 Image 的CSS内，失败，图片在APP中间覆盖为一个。

margin: 0 auto实现图片水平居中

尝试着放在 at-row 的 index View 层，成功。

text-align: center;
        position: absolute;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
    .small {
        width: 100%;
        height: 100rpx;}