uniapp开发微信小程序图片拉伸问题

最新推荐文章于 2024-03-20 16:15:29 发布
最新推荐文章于 2024-03-20 16:15:29 发布
阅读量2.9k 收藏 6
点赞数 1
分类专栏： 微信小程序 uniapp 文章标签： 微信小程序 uni-app 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_55258023/article/details/126731027
版权
在开发微信小程序或uniapp时遇到图片拉伸的问题，可以通过设置`<image>`组件的`mode`属性来解决。例如，使用`aspectFit`保持纵横比缩放图片，确保长边完全显示；或者使用`aspectFill`保证短边完全显示。了解不同`mode`属性值的含义，可以有效避免图片变形，提升用户体验。
摘要由CSDN通过智能技术生成

今天开发微信小程序的时候，发现我的图片被拉伸了

如何解决图片拉伸的问题

在uniapp中的image中有一个mode属性，去设置就好了

注意

src 仅支持相对路径、绝对路径，支持 base64 码

 mode的属性值有很多

我简单的给大家列出来几种

scaleToFill：不保持纵横比缩放图片，使图片完全适应

aspectFit：保持纵横比缩放图片，使图片的长边能完全显示出来

aspectFill：保持纵横比缩放图片，只保证图片的短边能完全显示出来

更加详细的大家可以去看下图

 

最后放上链接

image | uni-app官网 (dcloud.net.cn)

走出半生的少年
关注
专栏目录
微信小程序图片宽100%显示并且不变形
12-29
微信小程序图片宽100%显示并且不变形 按照HTML习惯进行写，代码： <view class=meiti> <image src=http://10.0.0.171:9001/images/2017/0619/20170619115150713_progressive.jpg xss=removed></image> </view> 效果如下： 很明显变形了 找到一篇关于微信小程序 图片的信息 //www.jb51.net/article/116771.htm 在图片上加上 mode=”widthFix” 代码如下： <view cla
uniapp app滑动、触摸时页面出现抖动拉伸解决
最新发布
admire_fish的博客
07-05 972
uniapp app滑动、触摸时页面出现抖动拉伸解决
uni-app小程序加载页面出现图片拉长再变正常的原因
weixin_45932157的博客
04-19 1791
在使用uniapp写微信小程序的页面样式的时候，你会发现一个现象就是加载图片的时候回先变长然后在正常显示，在pc端和app端没有问题。 这个原因是因为图片高度是自适应的，没有给固定高度。 解决方案就是给父元素固定宽高，图片设置宽高百分之百或者给图片加一个固定的宽高就解决了 ...
像uniapp image标签一样对图片进行缩放和裁剪
qq_39410252的博客
03-20 2733
在使用uniapp开发时觉着image标签的mode属性非常的使用，符合多种开发场景，并且最近有在整理`object-fit`和`object-position`的笔记，正好利用css属性按照image标签对于图片的缩放和裁剪处理，总结一套自己的经验。
uniapp css 展示图片原始大小不压缩或者拉伸图片
weixin_43907110的博客
11-15 569
获取图片信息，并赋值。
微信小程序 canvas 实现图片拉伸、压缩与裁剪
weixin_34364135的博客
08-23 2319
注意：本文转载自https://blog.csdn.net/vivian_jay/article/details/68933161 一、canvas绘图API 工欲善其事；必先利其器。隆重请出主角：canvas绘图函数drawImage()，酱酱酱~ 它能做什么：1. 绘制图像：将加载的图像绘制到canvas上；2. 绘制画布：将画好的一个canvas画到另一个can...
微信小程序图片裁剪we-cropper工具
05-07
微信小程序在开发过程中，经常会遇到需要对用户上传的图片进行裁剪的需求，以满足特定的显示或上传格式。为了方便开发者实现这一功能，社区中诞生了许多优秀的第三方组件，其中之一便是`we-cropper`。`we-cropper`是...
微信小程序和uni-app面试高频知识点
qq_53694927的博客
11-27 880
微信小程序和uni-app面试高频知识点
微信小程序简单总结
weixin_44388435的博客
04-25 704
一、配置项 1.window 用于设置小程序的状态栏、导航条、标题、窗口背景色。 navigationBarBackgroundColor 导航栏背景颜色，如 #000000 navigationBarTextStyle 导航栏标题颜色，仅支持 black / white navigationBarTitleText string ...
框架设计原理与实战：构建小程序的Uniapp框架
程序员光剑
11-17 149
1.背景介绍 小程序的形态及特点 微信小程序是一个开放的、跨平台的应用编程接口（API），它可以用来开发包括小程序在内的各种类型的应用。微信小程序使用 JavaScript 或 WXML/WXSS 来编写，可在 iPhone 和 Android 的手机端和平板电脑端上运行。 由于微信是国内领先的移动互联网
微信小程序image图片自适应宽度比例显示的方法
08-10
微信小程序image图片自适应宽度比例显示的方法
小程序日记：基础篇
qq_44719515的博客
06-21 3602
文章目录一、全局配置配置项1、pages2、window3、tabBar3.1：list的属性二、页面配置 page.json配置项配置示例三、sitemap 配置配置项rules配置示例WXML语法四、数据绑定1、简单绑定1.1、内容1.2、组件属性(需要在双引号之内)1.3、控制属性(需要在双引号之内)1.4、关键字(需要在双引号之内)2、运算2.1、三元运算2.2、算数运算2.3、逻辑判断2.4、字符串运算2.5、数据路径运算3、组合3.1、数组3.2、对象五、列表渲染1、wx:for2、block
uniapp和原生交互实现图片边缘拉伸效果
yun199466的博客
04-18 854
因为现在手机屏幕的多样化，导致我们的图片会存在一些拉缩变形的情况，所以这里我针对这块进行了一个方案的解决，如果大家还有更好的，感谢大家分享一下。（特别说明：我这里用的是本地图片，网络图片我没有研究过，所以如果您的是网络图用不了，麻烦您自己自行解决哈！） 我这里采用的方案是使用原生对图片进行处理，然后同步回传给uniapp进行展示，这种方案本人亲测有效（公司项目已经在使用），效果也还是蛮不错的，如果需要更高端更有效的，大家可以自行研究！ 在开始讲解方案前，大家可以先去看我之前写的uniapp和原生交互数据
小程序或uniapp实现图片加载时不拉升
helloworld963的博客
08-15 1776
2个问题的混合： 1.要解决图片加载过程中先变形，瞬间又恢复正常 尝试用height：auto可以解决 2.图片未加载时用背景色填充 就background-color：颜色 于是最终用display:none解决。 这样就ok了。 ...
uni-app如何解决微信小程序给图片设置固定宽高但发生变形的问题
热门推荐
shika233的博客
04-04 1万+
前端小白的uni-app艰难学习之路 问题 在开发过程中我发现，有时会遇到明明图片宽高设置的是相同的值，但在运行后图片却并没有显示出相对应的效果，反而看起来宽高非常不成比例，如以下示例： 最终效果： 可以看到，这并不是我们想要的结果，经过我反复调试，最后发现想要达到我们预期的效果（宽高相等即为正圆或正方形）也是非常简单的！ 解决 第一步： 我们需要给图片加一个父view组件（一开始我也是没有...
微信小程序中背景图片如何占满整个屏幕，拉伸
油焖茄子 的博客
08-07 3960
【代码】微信小程序中背景图片如何占满整个屏幕，拉伸。
小程序进入页面图片渲染会拉伸闪下变形，加载后显示正常的解决方案
苦夏木禾
12-28 1057
从接口传递过来的图片，本身图片大小不是固定一个比例，全部渲染显示在页面上，会有唰得拉伸从大到小快速闪下变形的bug
小程序image图片mode=“widthFix“图片显示瞬间竖向拉伸变形闪烁解决办法
酸狗的博客
09-11 1万+
在微信小程序给图片设置了宽度，然后设置了mode=“widthfix”,但是发现有的手机上会出现第一次进入页面加载图片的瞬间，图片会被拉的很长，然后恢复正常。然后把图片的高度也设置rpx的话，就不会出现这种情况了，所以小程序里图片需要设置高度。 官方文档中 mode=“widthFix” 宽度不变，高度自动变化，保持原图宽高比不变，即设置图片宽度而高度自适应。 但是在实际开发中发现图片在初始加载时瞬间竖向拉伸变形闪烁然后恢复正常宽高，也许是高度没设置的原因。 所以需要在app.wxss全局中把图片设.
uniapp背景图片自动拉伸填充
09-23
在Uniapp中，可以使用CSS属性background-size来实现背景图片的自动拉伸填充。通过设置background-size为"cover"，背景图片会根据容器的大小自动调整，保持图片的宽高比例，同时填充满整个容器。 例如，可以在样式中添加如下代码来实现背景图片的自动拉伸填充： ``` <style> .container { background-image: url("your-image-url.jpg"); background-size: cover; } </style> <div class="container"></div> ``` 这样，背景图片就会自动拉伸并填充满`.container`元素。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值