小程序中image标签的mode属性，防止图片调整宽高而导致拉伸的问题

最新推荐文章于 2024-05-15 04:11:36 发布
最新推荐文章于 2024-05-15 04:11:36 发布
阅读量3.8k 收藏 1
点赞数 1
文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/h33413398/article/details/115454090
版权

微信小程序中图片直接调整宽高很容易导致图片拉伸变形，达不到预期效果

mode = “widthFix” （按图片高度自适应） 或 mode=“aspectFill” （即保证图片原来内容的等比例拉伸，同时也会把图片拉伸到图片标签的大小）

给变形的图片添加该属性即可，一般aspectFill效果会更好些

骜然
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序 预防图片变形
onion_line的博客
10-20 2064
主要是加入 mode="widthFix" 更多： 官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/image.html  
image中mode=“widthFix“的意思
Falsify_的博客
07-25 2637
是可以根据图片的宽度自适应图片高度。
微信小程序 image组件的mode属性 以及 图片出现横向滚动轴_微信小程序开发 mode
最新发布
2401_85015083的博客
05-15 652
对于image这个组件本身，我设置了width:100%（待会来看看如果把这个100% 去掉会怎样）。一开始我做的时候，是没有给图片设置width为100%的，于是出现了滚动轴，还特别奇怪。调试一看，原来是图片原本的320px的宽度已经超出了格子的宽度，并且image组件自己已经设定好overflow:hidden（如图，没有设置width为100%的时候image的width）这就得说回我们刚才说的，有没有给image组件设置了width:100%的问题，下面就针对有无100%来区分。
image 标签 中的 mode=“widthFix“ 属性
weixin_49393290的博客
11-25 5024
这个属性可以根据图片高度自适应
微信小程序image属性 mode 的几种模式
qq_43146962的博客
01-02 5022
mode 有效值： mode 有 13 种模式，其中 4 种是缩放模式，9 种是裁剪模式。 模式 值 说明 缩放 scaleToFill 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素 缩放 aspectFit 保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。 缩放 aspectFill 保持纵横比缩放图片，只保证图片的短边能完全显示出来。也...
vue项目image标签的mode属性
weixin_42178670的博客
09-18 1万+
img元素的mode属性 scaleToFill： 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满image元素 aspectFill： 保持纵横比缩放图片，只保证短边能完全显示
微信小程序——image图片组件宽高自适应方法
01-03
第一次做小程序的时候使用了image图片组件，src引用一张图片后，给图片的样式设置了width:100%，发现图片变形了~~~，我想要的效果是，图片在父级中的宽是占据父级元素的100%，高度自动适应，按照html中的图片在...
微信小程序image图片加载完成监听
01-03
在应用中显示的图片很多情况不满足业务需求，我们需要动态根据图片的宽高进行缩放或加载中显示的缺省图片，这是我没就需要监听图片加载完成回调，来看看微信小程序怎么实现图片加载完成回调。 实现 1. 绑定回调 通过...
微信小程序-微信小程序中的图片自适应宽高的计算类
08-07
如果你已经看过一段时间的微信小程序后，你会发现，小程序中的图片虽然给了很多种mode，但是在你使用过程中，会出现很尴尬的问题。 比如： 图片很高，但是在显示的时候，只能看到小的缩略图，且如不指定宽高，则在...
微信小程序实现image组件图片自适应宽度比例显示的方法
01-20
本文实例讲述了微信小程序实现image组件图片自适应宽度比例显示的方法。分享给大家供大家参考，具体如下： 一. 了解image组件 由于image有默认的固定的宽度和高度，这样我们在做图片自适应的时候，就不好做了。下面...
React img图片显示模式
SoulKey的博客
12-20 992
VUE中是使用mode属性，React中是在样式中控制 img{ width:80px; height:80px; object-fit:cover; } cover：会裁剪，不会拉伸，短边充满控件元素 contain：不会裁剪，不会拉伸，长边充满控件元素 fill：不会裁剪，会拉伸，充满控件元素 ... ...
【css】解决image图片拉伸问题:
SunPeng的博客
07-24 3394
【css】解决image图片拉伸问题:
微信小程序-图片宽100%显示，不变形
热门推荐
秦秋雨的专栏
06-19 2万+
按照HTML习惯进行写，代码：<view class="meiti"> <image src="http://10.0.0.171:9001/images/2017/0619/20170619115150713_progressive.jpg" style="width:100%;"></image> </view> 效果如下： 很明显变形了然后查找资料 找到一篇关于微信小程
微信小程序-图片宽高自适应设置
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
09-26 1万+
微信小程序中，有很做组件都是有默认宽高的，比如，image组件默认宽度320px、⾼度240px，这些默认设置常常会对我们的页面布局造成影响 <!-- mode="widthFix" 让图片占满宽度，等比例缩放高度 --> <image src="xxxx" mode="widthFix"></image> 所以，在使用image标签的时候，最常用的方法就是设置其 mode，例如用widthFix，...
记一次img标签图片不拉伸处理办法
10-13 4481
当前需求是： UI 画的盒子，固定宽高 242 * 162，里边有一张图片，图片宽高不固定，但是图片不能拉伸，怎么展示没说 图片全部展示，不填充满，但是图片不能拉伸(最长边展示出来) 图片展示一部分，图片不能拉伸(最短边展示出来) 这个就简单了，微信小程序的 image 标签有一个 mode 属性，但是原生 html 的 img 标签没有啊 但是原生的 html 标签有 background-image 有 background-repeat 有 background-position 有 backgr
微信小程序 image组件的mode属性 以及 图片出现横向滚动轴
书写人生
05-19 4076
微信官方开发文档的截图 可以看到，image这个组件有四个属性，这次针对mode属性和我所做的小程序中用到的图片结合讲一下。 按照官方的mode，分为两类：一类缩放，一类裁剪。 我所做的pixiv是需要大量图片的网站。P站供画手们上传自己的作品。图片有大有小，按照这个，我们要做的可以分成两种 1、对上传上来的图片进行缩放（一般是缩小），放进我们规定好大小的格子中
小程序图片 mode 设置为 widthFix 图片显示瞬间竖向拉伸变形闪烁
漫天随飞雪的博客
10-26 9141
官方文档中 mode="widthFix" 宽度不变，高度自动变化，保持原图宽高比不变，即设置图片宽度而高度自适应。 但是在实际开发中发现图片在初始加载时瞬间竖向拉伸变形闪烁然后恢复正常宽高，也许是高度没设置的原因。 所以把图片设置 height: auto 即可解决问题 ...
微信小程序中base64转换成图片并获取图片路径并显示在image标签
05-30
好的，我可以帮你解答这个问题。首先，你需要使用小程序内置的wx.getImageInfo接口获取图片信息，并且将base64编码转换成临时文件路径。具体的代码实现如下： ```javascript // 将base64编码转换成临时文件路径 function base64ToPath(base64) { const base64Img = base64.replace(/[\r\n]/g, '') const buffer = wx.base64ToArrayBuffer(base64Img) const filePath = `${wx.env.USER_DATA_PATH}/${Date.now()}.png` wx.getFileSystemManager().writeFileSync(filePath, buffer, 'binary') return filePath } // 获取图片信息并显示在image标签 wx.getImageInfo({ src: base64ToPath(base64Data), success: function (res) { console.log(res.width) console.log(res.height) console.log(res.path) that.setData({ imagePath: res.path }) } }) ``` 上述代码中，我们定义了一个base64ToPath函数，将base64编码转换成临时文件路径，并且使用wx.getImageInfo获取图片信息，最后将图片路径设置到image标签中即可。注意，由于小程序的安全限制，我们只能将图片保存到小程序的临时文件夹中，不能直接将图片保存到相册中。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值