微信小程序图片的比例问题

最新推荐文章于 2023-12-19 14:15:00 发布
最新推荐文章于 2023-12-19 14:15:00 发布
阅读量949 收藏
点赞数 1
文章标签： 小程序 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Isaac_Play/article/details/104550979
版权

因为项目需要，第一次写微信小程序，一看代码跟vue的写法很像，便接下准备做，但是在写的时候发现微信小程序中image标签却不能像html中的img那样设置height或者weight为auto，一但设置了设置为auto的那个属性便会强制为0，了解了之后发现，微信小程序中的image标签实际上类似是封装的div，图片的展示就是利用设置div的background来实现的，所以不支持图片的auto属性设置，想要把图片设置成等比应该用另一种写法:

<image src="" mode='widthFix'></image>

在标签中设置mode='widthFix’就可以实现图片等比的功能了

Isaac_Play
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序image图片自适应宽度比例显示的方法
08-10
微信小程序image图片自适应宽度比例显示的方法
微信小程序 图片裁剪功能 (完整源码)
03-01
微信小程序源码，完整实现图片裁剪功能。 可以自由拖动裁剪框和手动调整裁剪尺寸，实时显示裁剪尺寸大小，准确完成图片裁剪功能，并且能够恢复原始图片，不会丢失原图。 提供完整源码，能够直接在小程序里正常运行，...
微信小程序图片image比例错误
weixin_30562507的博客
07-09 233
image标签不是块级元素，会被其他元素挤兑，导致实际宽高与所设置的不一致。所以需要在image标签之外包一层view标签！ 转载于:https://www.cnblogs.com/BlueCc/p/11158918.html...
小程序中图片等比例设置
丑小鸭立志变天鹅的博客
03-11 3405
小程序中图片等比例设置 小程序中使用image标签放图片，想要等比例设置宽度或者高度，使用width="100%"或者height="100%"中的一个值，另一个值并不会随之等比例变化。 <image mode="widthFix" src=""></image> 解决办法：在image标签中添加 mode="widthFix"后，设置宽度或者高度中任何一个，另一个会按比例随之放大或者缩小。 ...
微信小程序中图片等比例显示
Chocolate的博客
06-20 732
设计时如果需要图片显示的height是固定的，width根据图片自身比例自适应，则image需要加上mode="heightFix"，该image的class只设置width，不设置height。设计时如果需要图片显示的width是固定的，height根据图片自身比例自适应，则image需要加上mode="widthFix"，该image的class只设置height，不设置width。当图片的长宽比例和显示的位置的长宽比例不一致时，图片显示会失真。
小程序设置保持图片原有比例
真真的博客
12-25 6044
html页面 &lt;view wx:for="{{dayItem.images}}"&gt; &lt;image src='{{item}}' data-index="{{ index }}" bindload="imageLoad" style="width:{{ images[index].width }}rpx; height:{{ images[index].height }...
微信小程序图片放大预览，并双击可缩小的原始比例
04-09
在微信小程序中，图片预览是一项常见的功能，用户可以点击图片进行放大查看，甚至支持手势缩放和双击恢复原比例。本知识点将详细介绍如何利用微信小程序的API和组件实现这一功能，特别是如何通过`scroll-view`来实现...
微信小程序 图片缩放拖动
08-21
综上所述，微信小程序实现图片缩放和拖动的关键在于监听触摸事件，动态计算图片的缩放比例和位移，然后通过设置CSS样式来更新界面。通过分析和理解"minapp-master"项目中的代码，开发者可以快速掌握这一技术，并将其...
android 分享微信小程序+压缩图片优化
11-19
在Android开发中，微信分享是常见的社交功能，其中包括分享微信小程序、图片到微信朋友圈或微信好友。本教程将深入探讨如何实现这一功能，并特别关注图片压缩优化，以确保分享过程的顺利进行。 首先，我们需要集成...
小程序图片比例展示
weixin_43789753的博客
06-20 425
获取屏幕宽高 wx.getSystemInfo({ success: function (res) { // 获取可使用窗口宽度 let clientHeight = res.windowHeight; // 获取可使用窗口高度 let clientWidth = res.windowWidth; // 算出比例 let ratio = 750 / clientWidth; // 算出高度(单位rpx) let height = clien
微信小程序实现图片自适应(支持多图)
08-31
主要介绍了微信小程序如何实现图片自适应的相关资料，文中介绍的方法同样适应于多图，有需要的朋友可以参考借鉴，下面来一起看看吧。
微信小程序实现image组件图片自适应宽度比例显示的方法
08-28
主要介绍了微信小程序实现image组件图片自适应宽度比例显示的方法,简单讲述了image组件的常用属性,并结合实例形式分析了微信小程序实现图片自适应宽度比例的相关操作技巧,需要的朋友可以参考下
微信小程序设置图片保持原有比例
qq_45351320的博客
04-29 2065
微信小程序设置图片保持原有比例 .wxml文件 <block wx:for="{{swiper}}" wx:key="index"> <view class="picture_introduction_picture"> <image src="{{item.image}}" data-index="{{ index }}" bindload="...
小程序中等比例缩放大小，并居中设置
TongXin9的博客
05-24 1173
image标签直接设置width或者height的值，只能是固定的值，另外一个值不会跟着等比例变化。
微信小程序——设定图片固定比例
k464746的博客
10-28 1760
实现原理及思路 SelectorQuery wx.createSelectorQuery() 进入微信官方文档查看 示例代码 const query = wx.createSelectorQuery() query.select('#the-id').boundingClientRect() //也可以使用类名 .the-class query.selectViewport().scrollOffset() query.exec(function(res){ res[0].top
uniapp开发微信小程序中图片大小显示不正常
最新发布
好幸运
12-19 375
【代码】uniapp开发微信小程序中图片大小显示不正常。
详解 - 解决微信小程序分享功能图片比例问题 - 全局分享
qq_52021866的博客
03-24 1502
详解 - 解决微信小程序分享功能图片比例问题 - 全局分享
项目图片显示大小问题
longbao_1的博客
11-19 207
一、项目中图片问题 项目中小图片按照ui设置的样图规格，设置图片大小，怎么都大小和定稿不一样，区别特别大。 二、问题原因 ui切图没处理好，导致出来的切图和原来尺寸的图片位置、大小不一致，所以图片显示不正确。 三、解决方式 自己通过ps或切图工具将图片切成合适尺寸 ...
小程序真机调试比例失调
東₂₀₂₃²⁰²³
02-25 3062
问题：开发工具开发完成后真机调试按钮出现问题（其他问题参考解决思路） 1. 发现问题 先来对比一组图 上图左侧为模拟器上的效果，按钮横向排列，右侧为垂直排列。 2. 分析问题 看一下控制按钮的样式（已设置其父dom宽度100%）： .todolist-button button{ width: 15%; margin-left: 5%; padding: 0; m...
微信小程序 图片尺寸
09-09
微信小程序的图片尺寸可以根据实际需求进行设置。一般来说，微信小程序中的...同时，引用提供了一个微信小程序图片裁剪功能的源码，可以在小程序中实现自由拖动裁剪框和手动调整裁剪尺寸的功能，以准确完成图片裁剪。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值