uniapp是一款跨平台的开发框架，支持多种移动端应用开发，包括微信小程序、支付宝小程序、H5应用等。在开发中，很多情况下都需要使用图片资源，而图片相对大小的设置又是一个比较常见的需求，下面我们就来看看uniapp中如何设置图片相对大小。
1. 图片以百分比方式设置大小
1.1 在HTML标签中直接设置
一般情况下，可以直接在标签中通过style属性设置图片的大小，常见的做法是以百分比的方式进行设置。例如，要将图片宽度设置为父容器宽度的70%，高度等比例缩放，则可以这样设置：
<template>
<view class="container">
<img src="/static/demo.jpg" style="width:70%;height:auto;" />
</view>
</template>
上述代码中，我们设置了图片的宽度为70%，高度自动适应。需要注意的是，如果图片只设置了宽度，而没有设置高度，那么图片的高度将不会随着宽度的改变而改变，而是保持原有的高度。
1.2 在CSS中设置
另外一种设置图片大小的方法是在CSS中进行设置，具体如下：
/* 在CSS中定义img标签的样式 */
img {
max-width: 100%;
height: auto;
}
上述样式会将所有标签在水平方向上缩放至最大100%，并使其高度自适应。
2. 按像素设置图片的大小
除了按百分比进行设置外，还可以按照像素值进行设置。例如，我们要将一张400x400像素的图片在页面中显示为200x200像素大小，可以这样设置：
<template>
<view class="container">
<img src="/static/demo.jpg" style="width:200px;height:200px;" />
</view>
</template>
上述代码中，我们将图片的宽度和高度都设置为200像素，达到了我们的目标。
3. 使用flex布局进行图片缩放
在使用flex布局时，也可以通过设置flex属性来控制图片的缩放。例如，我们将一个容器设置为flex布局，然后在其中添加图片，可以这样设置：
<template>
<view class="container" style="display:flex;justify-content:center;align-items:center;">
<img src="/static/demo.jpg" style="flex:1;" />
</view>
</template>
上述代码中，我们使用了flex布局，并将图片的flex属性设置为1，表示图片的大小将自动缩放以充满容器。
4. 总结
通过以上的介绍和示例，我们可以看到，uniapp中设置图片相对大小的方法有很多，具体的选择取决于实际需求。一般情况下，可以通过style属性直接设置宽高百分比或像素值，也可以将样式定义在CSS中；在使用flex布局时，还可以通过设置flex属性来控制图片的缩放。需要注意的是，在设置图片大小时，应根据实际情况进行调整，以达到最佳效果。