uniapp图片展示自适应等比例缩放方法举例
更新时间：2023年10月09日 16:27:49 作者：微微一笑吓死谁
这篇文章主要给大家介绍了关于uniapp图片展示自适应等比例缩放方法的相关资料,在uniapp页面展示中会遇到图片展示问题,等比缩放或者自适应view大小,需要的朋友可以参考下
在uniapp页面展示中会遇到图片展示问题，等比缩放或者自适应view大小。 只固定调整图片的宽度（或者高度）而图片的高度（或者宽度）可以自动根据图片原始比例调节的情况，这种情况下我们可以通过使用image标签的mode属性控制。
组件默认宽度 320px、高度 240px；
注意uniapp图片标签这里是image标签不是img标签
mode 有效值：
mode 有 14 种模式，其中 5 种是缩放模式，9 种是裁剪模式。
我们一般用到红框里面的几种。
具体的使用如下:
//限制宽度，等比缩放图片大小
<image class="image" :src="circleUrl + message.payload.basePath" mode="widthFix" ></image>
//设置图片最大宽度
.image{
max-width: 400rpx;
}附：uniapp中图片高度或者宽度自适应
在uniapp中可能会遇到希望只调整图片的宽度（或者高度）而图片的高度（或者宽度）可以自动根据图片原始比例调节的情况，可以通过使用image标签的mode属性控制（注意这里是image标签不是img标签）
image标签的mode属性具有以下值可供选择：
具体使用如下：
//希望设置宽度后高度等比例缩放 <image class="contentAimg" src="/static/home/hotserve2.png" mode="widthFix" />
总结
到此这篇关于uniapp图片展示自适应等比例缩放的文章就介绍到这了,更多相关uniapp图片展示自适应内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
html的DOM中document对象images集合用法实例
这篇文章主要介绍了html的DOM中document对象images集合用法,实例分析了images集合的语法与使用技巧,需要的朋友可以参考下2015-01-01
这篇文章主要介绍了javascript实现简单的全选和反选功能的相关资料,需要的朋友可以参考下2016-01-01
下面小编就为大家带来一篇js控制div层的叠加简单方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-10-10
javascript获取wx.config内部字段解决微信分享
这篇文章主要介绍了javascript获取wx.config内部字段解决微信分享,需要的朋友可以参考下2016-03-03
本文是小编给大家日常收集整理的js中常见的10种错误，非常不错，具有参考借鉴价值，需要的朋友参考下2017-01-01
函数是由关键字function、函数名加一组参数及置于大括号中需要执行的一段语义定义的。今天我们就来详细讲解一下JavaScript中的Function。2015-02-02
这篇文章主要介绍了typescript中声明合并介绍，类型合并表明编译器将合并两个分开的并且名称相同的声明，合并之后的声明拥有两个声明的特点，任意数量的声明可以被合并，不仅限两个，更多相关内容需要的朋友可以参考下面文章内容2022-09-09
我们可以将call和apply看做是某个对象的方法，通过调用方法的形式来间接调用函数2013-09-09
先声明一些东西，消除歧义：这篇博文中的JavaScript是指一般意义上的JavaScript，并不只限定“自称是JavaScript”的运行环境2009-11-11
这篇文章主要带领大家理解JavaScript表单的基础知识，对javascript表单脚本进行深入学习，感兴趣的小伙伴们可以参考一下2016-01-01
最新评论