app发布动态解决图片适配问题（等比展示）

#前言

        最近在用uni-app写一个移动端的小项目，基本上就是登陆注册、发表动态等，但是发表动态一个最大的问题就是图片的展示问题，因为每个人上传的图片大小是不一样的。

        1.如果按照一定的尺寸固定图片宽高，那如果图片规格不符合要求的化，显示的图片就会变形。        

        2.如果固定宽高，或者说只固定一边，另一边自适应。那么可能会出现的问题是，图片展示的大小不一样，有的图片只展示很小一部分，有的图片可能都没办法撑满盒子，很影响美观。

#解决

        首页我们要知道，我们虽然在代码上写的是标签，但是当编译代码的时候，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.如何动态展示图片？

       我们是要写动态的，图片地址当然不能写死，那就要把图片样式添加到行内样式里了，这样才能实现图片的属性的动态添加

注意： backgroundImage和background是有区别的

1.         backgroundImage是设置元素背景图像的 CSS 属性。
2.         background设置元素背景的 CSS 简写属性

如果写成background可能会没有效果，请注意这一点

#效果展示

图1

图2