微信小程序开发之图片等比例缩放 获取屏幕尺寸图片尺寸 自适应

最新推荐文章于 2024-08-08 08:30:02 发布
最新推荐文章于 2024-08-08 08:30:02 发布
阅读量7.9w 收藏 64
点赞数 14
分类专栏： 微信小程序 微信小程序开发 文章标签： 微信小程序 图片等比例缩放 图片自适应 获取屏幕宽高
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_31383345/article/details/53127804
版权

早上在论坛上看到有人写了关于图片等比例缩放的文章,只是判断了图片宽是否大于屏幕宽.我之前在做Android的时候也会遇到图片等比例缩放的问题.应该是用图片宽高比和屏幕宽高比做判断.做个笔记.

老规矩,先上图.

1.图片高宽比小于屏幕高宽比



2.图片高宽比大于屏幕高宽比



3.这种其实也是图片高宽比小于屏幕高宽比,但是高宽都大于屏幕高宽.所以不能简单用

最低0.47元/天 解锁文章
dzp_coder
关注
  • 14
    点赞
  • 踩
  • 64
    收藏
    觉得还不错? 一键收藏
  • 13
    评论
专栏目录
微信小程序-图片宽高自适应设置
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
09-26 1万+
微信小程序中，有很做组件都是有默认宽高的，比如，image组件默认宽度320px、⾼度240px，这些默认设置常常会对我们的页面布局造成影响 <!-- mode="widthFix" 让图片占满宽度，等比例缩放高度 --> <image src="xxxx" mode="widthFix"></image> 所以，在使用image标签的时候，最常用的方法就是设置其 mode，例如用widthFix，...
微信小程序--图片等比例缩放 获取屏幕尺寸图片尺寸 自适应
极客小寨的博客
12-24 1595
1. index.wxml &lt;image style="width: {{imagewidth}}px; height: {{imageheight}}px;" src="{{imagethirdsrc}}" bindload="imageLoad"&gt;&lt;/image&gt; 2. index.js //获取应用实例 var imageU...
微信小程序开发 图片等比例缩放
就写一行代码
04-25 3125
1.pic.wxml&lt;image style="width: {{imagewidth}}px; height: {{imageheight}}px;" src="{{img_url}}" bindload="imageLoad"&gt;&lt;/image&gt; 2.pic.js// pages/userCenter/pages/pic/pic.js var util = requir...
微信小程序使用RenderingContext进行图片尺寸压缩
jeffreynksh的博客
06-04 1945
基于RenderingContext图片尺寸压缩
微信小程序图片裁剪组件 - wx-cropper 使用教程
最新发布
gitblog_00958的博客
08-08 570
微信小程序图片裁剪组件 - wx-cropper 使用教程 wx-cropper:scissors: 微信小程序 图片裁剪工具，简单易用项目地址:https://gitcode.com/gh_mirrors/wx/wx-cropper 项目介绍 wx-cropper 是一个基于微信小程序的轻量级图片裁剪组件，设计用于简单易用的图片处理场景。它支持自定义裁剪区域的尺寸，适配于头像选取、商品图片...
小程序的图片尺寸
弹指一挥间
03-10 8610
小程序image组件有个默认的尺寸：宽度300px、高度240px 一般我们都会会设置width:100%，这个时候宽度还是240px <view> <image src="{{image}}"mode="widthFix"></image> </view>image 这个时候就要加mode属性设置图片的缩放模式了： widt...
微信小程序rich-text富文本 解决图片超出屏幕宽度
hyqhyqhyqq的博客
03-27 1559
使用正则将数据中https://img-blog.csdnimg.cn/a49b804bc3e546b6a9d9cb454ca3fde5.png的img标签定义class或者直接写样式。再js文件中将数据进行修改。
微信小程序 图片宽度自适应的实现
08-30
在微信小程序中，图片宽度自适应的实现是一个常见的需求，特别是在设计响应式界面时，确保图片能在不同设备和屏幕尺寸上正确展示至关重要。本篇主要介绍如何在微信小程序中实现图片宽度自适应。 首先，我们需要了解...
微信小程序——整个页面的自动适应布局、图片自适应、高度自动占满剩余部分
热门推荐
wy313622821的博客
04-24 2万+
按比例适应布局 大家有没有过一个烦恼，就是让某个view的高度或者宽度扩大点，而且是要按比例适应不同的手机，遇到这类问题应该怎么办？ 下面就为大家讲解怎么做一个能够自动适应不同手机的布局 1、像素单位 rpx 首先，我们来说说像素单位rpx，rpx是官方为小程序出的尺寸单位rpx(responsive pixel)，它可以根据屏幕宽度进行自适应。规定屏幕宽度为750rpx。所以平常我们应该尽量使用...
16.微信小程序之图片剪裁
panzina的博客
12-25 313
由用户上传图片，但可能用户上传的图片尺寸不合适会导致图片变形。这时就需要可以进行图片剪裁。 做了调研，可以看看 1.https://www.cnblogs.com/yuanzp/p/9268861.html 2.https://www.cnblogs.com/wush-1215/p/9510936.html 3.https://we-plugin.github.io/we-cropper/...
微信小程序图片在不同设备显示保持图片比例并且居中
Au的博客
11-25 4115
         最近都在开发微信小程序，碰到一个这样的问题，就是图片在不同尺寸手机要求不被压缩（长宽之比不变），并且上下左右居中，效果图如下（左iPhone 7Plus，中iPhone 7，右iPhone X）： 刚开始用px为单位，其实也可以，效果不是很好，于是改用vw（设备的宽度）和vh（设备的高度）了。 1vw=1%宽度，1vh=1%长度，下面是我在项目里面的代码： demo....
微信小程序图片上传，多图上传可限制张数
夏至
07-31 2609
wxml <view class="up_items"> <view class="up_item" wx:for="{{images}}" wx:key="*this"> <image class="up_image" src="{{item}}"></image> </view> <view class="up_btn" bindtap="upLoad" wx:if="{{images.length<10}}">
封装---小程序上传图片，限制图片的格式和大小
m0_56804390的博客
03-09 1333
export default function(type, callBack) { let isUpload = true return new Promise((resolve, reject) => { wx.chooseImage({ count: 1, success: res => { let types = res.tempFiles[0].path.subst...
微信小程序操作图片放大、缩小、旋转、拖拽
m0_37047503的博客
04-13 7070
这里写自微信小程序操作图片放大、缩小、旋转、拖拽 在开发小程序的时候遇到了上传图片，然后编辑的需求。打算网上找一下相关代码组件的，就不用自己搞这么麻烦。经过一番折腾，还是没有找到如意的，最后自己弄好了，记录一下。 思路 用一个object装着图片的全部编辑数据，包括偏移的x 和y、放大缩小的倍数、图片旋转的角度。每当这个变量改变的时候都重新绘制一下图片。 imgdata: { offs...
微信小程序 图片自适应
h_xiangxiang的博客
09-19 1317
创建一个js文件，写入这段代码,需要的地方再引入 function imageUtil(e) {   var imageSize = {};   var originalWidth = e.detail.width;//图片原始宽   var originalHeight = e.detail.height;//图片原始高   var originalScale = originalHe
微信小程序设计第一期第六节:图片大小的调整
linfuck的博客
01-04 1986
微信小程序设计第一期第六节:图片大小的调整 欢迎加老师微信linMr6进行技术交流与合作
微信小程序图片自适应策略：等比例缩放与屏幕尺寸匹配
本文主要介绍了微信小程序中如何实现图片的等比例缩放，以及如何根据屏幕尺寸进行自适应布局。作者通过分析不同情况下图片与屏幕尺寸的关系，提出了使用图片宽高比与屏幕宽高比进行判断的方法，并给出了相关的WXML和...
评论 13
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值