微信小程序 image 图片保持宽高比自动缩放高度

最新推荐文章于 2024-10-29 20:15:38 发布
最新推荐文章于 2024-10-29 20:15:38 发布
阅读量6.7k 收藏 2
点赞数
CC 4.0 BY-SA版权
分类专栏： 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_39702981/article/details/84645256
在微信小程序中，当给image设置宽度后，默认不会自动按比例缩放高度。通过设置`mode="widthFix"`可以实现保持图片宽高比。其他可用模式包括：`scaleToFill`、`aspectFit`和`aspectFill`，分别有不同的缩放效果。详细信息可参考官方文档。

初始情况下，我们给 image 设置了宽度后，发现高度并不像 HTML 中一样自动缩放，好吧，我们试着设置 height:auto;，现在倒好，图片都看不到了。

难道微信小程序中不能保持图片的宽高比？

不是得。我们为 image 标签设置 <image mode="widthFix"，就可以保持宽高比了。

注意：如何使用了这个模式，那么在 .wxss 中为图片设置的 height 将无效。

所以有时候我们也可以用这几种模式：

  • scaleToFill 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
了解本专栏 订阅专栏 解锁全文 超级会员免费看
canvas中drawImage理解，image图片自适应宽度比例显示的方法
03-29
作者：汉堡请不要欺负面条，授权地址   一：image图片自适应宽度比例显示的方法 一.了解image组件  (此图片来源于网络，如有侵权，请联系删除! ) 由于image有默认的固定的宽度和高度，这样我们在做图片自适应的时候，就不好做了。下面就来一起解决下 二.方法  (一).使用mode：widthFix  widthFix：宽度不变，高度自动变化，保持原图宽高比不变。  首先我们先设置image的mode为widthFix，然后给图片加一个固定rpx的宽度，比如：730rpx。  这样图片也可以自适应了。。因为小程序的rpx本身就是一个自适应显示的单位 (二).使用bindload绑定函
微信小程序实现image组件图片自适应宽度比例显示的方法
01-20
本文实例讲述了微信小程序实现image组件图片自适应宽度比例显示的方法。分享给大家供大家参考，具体如下： 一. 了解image组件 由于image有默认的固定的宽度和高度，这样我们在做图片自适应的时候，就不好做了。下面就来一起解决下 二. 方法 (一).使用mode：widthFix widthFix：宽度不变，高度自动变化，保持原图宽高比不变。 首先我们先设置image的mode为widthFix，然后给图片加一个固定rpx的宽度，比如：730rpx。 这样图片也可以自适应了。。因为小程序的rpx本身就是一个自适应显示的单位 (二).使用bindload绑定函数动态自适应。 我们可以给im
如何让图片宽度不变，高度自动变化，保持原图宽高比不变
cccbbbmmm的博客
12-09 734
通过以上代码，您可以实现让图片宽度不变，高度自动变化，并保持原图宽高比不变的效果。，这会使得图片的宽度不超过其容器的宽度，从而保持宽度不变。，这会根据原图的宽高比自动计算出图片的高度，以保持图片的比例不变。标签来显示图片，并为其添加了一个名为。在CSS样式中，我们设置了。在上述代码中，我们使用。
小程序 图片image如何保持高度等比例
qq_25239049的博客
09-06 2054
1.给image 添加mode = “aspectFit” 属性 等比例缩放图片 2. mode=“widthFix”
小程序 canvas注意事项（7）drawImage图片适配方式
旸君颜的博客
09-21 8704
在使用drawImage画网络图片时，需要画出的图片可能会与设计尺寸不符，此时绘制的图片会被压缩或者拉伸，十分不美观。 微信在1.9.0后支持设置更多属性来处理，方法如下 drawImage(sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)从 1.9.0 起支持 但是文档比较简单，试验过后发现不能满足需求QAQ，所以写了一些简单的处理 下...
微信小程序图片缩放功能实现及闭坑
ly5926的博客
10-29 1028
但是与我对接的是文科出身，不懂技术的甲方，非要图片缩放功能，且一直在和我们扯皮，在这种情况下，这种方案便是相对较好的方法了。微信提供的组件，可以缩放，但是它是以左上角为原点进行缩放，而且不能移动，就是你放大后，你大概只能看到左上角放大的部分，你想移动去看其他部分，不可能！确实可以实现缩放的效果，但是它的闪动频率极高，基本你一碰到屏幕，就开始连闪，我一开始这个做好后，我自己这关都没过去。这个api可以满足绝大部分的需求，如果图片大小不大的话，可以使用这个api，可以很好的实现双指缩放，单指移动的效果。
img标签等比例缩放
小楼一夜听春雨
09-20 3万+
对img标签设置高度或宽度，设置了宽度就别设置高度，设置了高度就别设置宽度，图片会根据设置的宽度或者高度进行缩放
微信小程序image图片加载完成监听
10-16
得到调整后的图片尺寸信息后，可以利用微信小程序提供的setData方法对页面数据进行更新，从而达到动态调整图片宽高的效果。代码示例如下： ```javascript // 获取调整后的图片尺寸 var imageSize = imageUtil(e); /...
精选资源
微信小程序 动态的设置图片的高度和宽度详解及实例代码
01-03
微信小程序图片等比例缩放 动态的获取图片的高度和宽度 动态的设置图片的高度和宽度 前言： 在小程序布局中，如果图片不是固定高度和高度，但image设置的是固定的高度和宽度，这时候原始图片相对image设置的固定...
html img 手势缩放,微信小程序中利用image组件实现图片手势缩放
weixin_36008052的博客
07-03 1439
微信小程序中利用image组件实现图片手势缩放，前端大神严灏的牛文，讲解了微信小程序中image组件的三种是缩放模式，三种之中，只有 aspectFit 模式可以等比例缩放图片，并显示完整的图片。原文：http://www.ifanr.com/technotes/740404微信小程序中，image 组件的 mode 有 12 种，其中只有三种是缩放模式。而在这三种之中，只有 aspectFit ...
微信小程序之 image图片自适应宽度比例显示
weixin_43789261的博客
12-08 2214
微信小程序——image图片自适应宽度比例显示，使用bindload绑定函数动态自适应
微信小程序开发 踩坑日志之一： image设置宽高无效？
csdn317341539的博客
10-14 4360
.icon{ width: 190rpx; height: 190rpx; margin-top: 60rpx; margin-bottom: 30rpx; } <image src="/images/icon/big-done.png" class="icon"/> css样式中我给图片设置了宽高，但无论怎么设置图片都还是一样那么小。在进行各种更改尝试之后。。...
ImageView 宽度顶边显示，高度保持比例
Beluga_白鲸
07-13 3640
图片宽度顶边显示，高度保持比例 <ImageView android:layout_width="match_parent" android:layout_height="wrap_content" android:paddingLeft="5dp" android:p
微信小程序 image 组件保持图片原宽高比不变
qq_43712409的博客
05-21 1220
<!--pages/XX/XX.wxml--> <view> <!-- mode="widthFix" 缩放模式，宽度不变，高度自动变化，保持原图宽高比不变 --> <image mode="widthFix" class="imgView" src="/images/XX.jpg"></image> </view> /* pages/XX/XX.wxss */ .imgView{ width: 650rpx;
微信小程序image图片自适应宽度比例显示的方法
热门推荐
汉堡请不要欺负面条
05-05 9万+
一.了解image组件 由于image有默认的固定的宽度和高度，这样我们在做图片自适应的时候，就不好做了。下面就来一起解决下 二.方法 (一).使用mode：widthFix widthFix：宽度不变，高度自动变化，保持原图宽高比不变。 首先我们先设置image的mode为widthFix，然后给图片加一个固定rpx的宽度，比如：730rpx。 这样图片也可以自适应了。。因为
ImageView保持宽高比例 adjustViewBounds属性
cdy的博客
02-17 2228
将ImageView的宽或者高限定，按照比例展示图片，搜索得到的结果是： android:adjustViewBounds 是否保持宽高比。需要与maxWidth、MaxHeight一起使用，否则单独使用没有效果。 我只用了android:adjustViewBounds 属性，并没有与max###一同使用。
css设置img图片保持宽高比
Sunny_lxm的博客
04-10 2151
css设置img图片保持宽高比 aspect-ratio
微信小程序image组件的mode总结+介绍（包含heightFix）
weixin_42017221的博客
10-24 4498
2.10.3版本后，微信小程序的图片即image组件新增了heightFix属性（mode），总共具有14种属性，满足各种情况的放置需要。14种属性可以分为两大类，一种是完全保留的缩放属性，一种是裁剪属性。
微信小程序：降低image层级，重叠排版方法
小码的博客
07-16 1万+
像这种怎样排版呢？ 一般的方法，是白底圆角矩形的“margin-top: -80rpx;”这样就达到白底圆角矩形上移，压在图片上的效果。 但是微信小程序image层级很高，按照这种方法，显示的确实如下： 微信小程序的文字跑image上了，白色圆角矩形跑image底下了，这种怎么处理叻？ 用它“display: inherit;” inherit 规定应该从父元素继承 d...
css设置图片宽高比
最新发布
11-06
使用 CSS 设置图片宽高比有多种方法，以下为你详细介绍： #### 使用 `padding-bottom` 实现 通过设置父元素的 `padding-bottom` 来固定宽高比，将图片设置为宽度 100% 以填充父元素。 ```html <div class="img-wrapper"> <img src="your-image-url" class="image"> </div> ``` ```css .img-wrapper { overflow: hidden; width: 100%; height: 0; /* 让图片宽高比为 16:9 */ padding-bottom: 56.25%; } .image { width: 100%; } ``` 这种方式可以让图片在不同屏幕尺寸下保持固定的宽高比，例如设置 `padding-bottom: 56.25%` 可实现 16:9 的宽高比[^2]。 #### 使用 `aspect-ratio` 属性 这是 CSS 新特性，直接为图片或其容器设置宽高比。 ```html <img src="your-image-url" class="image"> ``` ```css .image { width: 100%; aspect-ratio: 16 / 9; } ``` 使用 `aspect-ratio` 属性可以简洁地设置图片的宽高比，如 `aspect-ratio: 16 / 9` 就是设置为 16:9 的宽高比。 #### 背景图片设置宽高比 对于通过 CSS 的 `background-image` 设置的背景图片，可利用 `padding-bottom` 实现宽高比，同时使用 `background-size` 使背景图片覆盖整个元素区域。 ```html <div class="box"></div> ``` ```css .box { width: 50%; margin: 100px auto; background-color: pink; position: relative; /* 对应 4:3 的宽高比 */ padding-bottom: 75%; background-image: url('your-image-url'); background-size: cover; } ``` 上述代码通过 `padding-bottom: 75%` 实现 4:3 的宽高比，`background-size: cover` 确保背景图片覆盖整个元素区域[^1][^3][^4]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值