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图片展示自适应内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
方法重写，重写要禁用的方法，并让它什么也不做，结果证明真的可行，但并不知道是不是一个科学的方法，我拿出来与大家共同讨论一下2013-07-07
本网站的javascript程序架构从以下几个基本点出发2008-10-10
js操作CheckBoxList实现全选/反选(在客服端完成)
对于CheckBoxList控件来说，一方面要实现大量数据在服务器端的绑定工作，另一方面往往要求实现全选、反选等功能,接下来将介绍js操作CheckBoxList实现全选/反选，感兴趣的朋友可以了解下，或许对你有所帮助2013-02-02
一种很常见的写法,大家都是这样写的，但如果这样的代码，杀毒软件认为是病毒的吧，就太恶劣的。判断能力也太差了。2009-09-09
这篇文章主要为大家详细介绍了js实现内容显示并使用json传输数据的方法，感兴趣的小伙伴们可以参考一下2016-03-03
本文给大家分享的是Js中字符串转换成数组，数组转换成字符串的函数，十分的简单实用，有需要的小伙伴可以参考下。2015-05-05
这篇文章主要介绍了JavaScript库urlcat之URL构建器库，urlcat 是一个小型的JavaScript库，使构建URL非常方便并防止常见错误。下文来看对其详细介绍吧，需要的小伙伴可以参考一下2022-02-02
最近在使用JS动画做一些练习的时候我发现在动画执行时间内快速移开鼠标时会出现动画因鼠标移动过快从而导致代码冲突让画面抖动的bug,这篇文章主要给大家介绍了关于JavaScript实现动画时动画抖动的原因与解决方法,需要的朋友可以参考下2022-06-06
这篇文章主要介绍了es6中Promise 对象基本功能与用法,结合实例形式分析了es6中Promise对象的基本功能、用法及操作注意事项,需要的朋友可以参考下2020-02-02
浅谈JavaScript的push(),pop(),concat()方法
下面小编就为大家带来一篇浅谈JavaScript的push(),pop(),concat()方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
最新评论