uniapp中不同大小的图片如何在相同的view中大小显示一致

     实际工作中会经常遇到图片处理问题,服务端同一个接口中返回的多张图片大小尺寸可能是不同的,但是页面渲染时如何保持图片显示大小一致,本文说下自己的做法.
     最简单的办法是保持包裹image的view大小与image中大小一致,实现方式如下:
style中:

.image_class{
      width: 280rpx;
   		height: 160rpx;
   		image{
        width: 280rpx;
        height: 160rpx;
   		}
  }

template中:

	<view>
	<view class="image_class" v-if="item in imgList" :key=item.id>
       <image :src="item.imageUrl" ></image>
     </view>
	</view>

实现效果如下:
uniapp中不同大小的图片如何在相同的view中大小显示一致_第1张图片
     注意在image标签中设置height与width比例都为100%不起作用.简单记录一下,希望对有同样问题

你可能感兴趣的:(uni-app)