#前言
最近在用uni-app写一个移动端的小项目，基本上就是登陆注册、发表动态等，但是发表动态一个最大的问题就是图片的展示问题，因为每个人上传的图片大小是不一样的。
1.如果按照一定的尺寸固定图片宽高，那如果图片规格不符合要求的化，显示的图片就会变形。
2.如果固定宽高，或者说只固定一边，另一边自适应。那么可能会出现的问题是，图片展示的大小不一样，有的图片只展示很小一部分，有的图片可能都没办法撑满盒子，很影响美观。
#解决
首页我们要知道，我们虽然在代码上写的是<image>标签，但是当编译代码的时候，uni-app会给我们自动转换成背景图片，然后再进行展示，我们就可以根据这个来写。
直接把图片写成背景图片（让人家少走一步弯路），然后让图片撑满这个盒子。
代码如下：
.image {
width: 220rpx;
height: 225rpx;
background: no-repeat center;
background-size: cover !important;
}
这个步骤分为四步：
1.给盒子设定一个固定的宽和高，然后让图片铺满整个盒子
2.background: no-repeat center;设置背景属性，其中 no-repeat 表示不重复背景图像，center 表示在水平和垂直方向上居中显示背景图像。
3.background-size: cover !important;设置背景图像的尺寸为盖满整个元素，!important 是一个CSS规则，它告诉浏览器这个样式优先级最高，不受其他样式的影响。
接下来就是最重要的一步
4.如何动态展示图片？
我们是要写动态的，图片地址当然不能写死，那就要把图片样式添加到行内样式里了，这样才能实现图片的属性的动态添加
<!-- 发布文章时的图片 -->
<view class="like-photo-item" v-for="(imagesSrc,i) in item.pic">
<view class="image" :style="{backgroundImage:`url(${imagesSrc})` }"</view>
</view>注意： backgroundImage和background是有区别的
- backgroundImage是设置元素背景图像的 CSS 属性。
- background设置元素背景的 CSS 简写属性
如果写成background可能会没有效果，请注意这一点
#效果展示
图1
图2
