uniapp 图片缩放
时间: 2024-01-27 20:15:30 浏览: 107
在uniapp中,可以使用image标签的mode属性来控制图片的缩放方式。以下是几种常用的图片缩放方式:
1. aspectFill:保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。
```html
<image src="../../../static/timg%5B3%5D.jpg" mode="aspectFill"></image>
```
2. aspectFit:保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。
```html
<image src="../../../static/timg%5B3%5D.jpg" mode="aspectFit"></image>
```
3. widthFix:宽度不变,高度自动变化,保持原图宽高比不变。
```html
<image src="../../../static/timg%5B3%5D.jpg" mode="widthFix"></image>
```
需要注意的是,image组件默认宽度为320px,高度为240px。如果需要自定义宽度和高度,可以在image标签外部的view标签中设置样式。
```html
<view class="orgimg">
<image src="../../../static/timg%5B3%5D.jpg" mode="aspectFill"></image>
</view>
<style lang="scss">
.orgimg {
width: 500upx;
height: 500upx;
}
</style>
```
阅读全文