专栏首页韦弦的偶尔分享微信小程序设置图片固定比例

微信小程序设置图片固定比例

今天介绍一个让图片在任何容器都保持固定比例的方法。

有时我们的图片并不是同一个比例,但是我们需要设置图片保持一个固定的比例,在小程序里面因为宽度固定为750rpx,所以我们如果需要设置宽高比为2 : 1的话直接设置图片css的宽为一个固定值,然后高为固定值一半就行了。这样在不同的屏幕下都能保持设定的比例。

但是这样并不是很方便,比如我想封装一个自定义组件,作为列表的Cell(我是iOS开发来着。。。),我只要设置列表的宽度,Cell里面图片宽度和高度就定下来了。

首先我百度到两种方法:

一、调用js操作DOM

在小程序内无法直接操作DOM,但是微信也是提供了接口的:wxml节点信息API

1.没有封装组件时,我们可以在js文件中的onShow方法中使用:
onShow: function() {
    var that = this
    var query = wx.createSelectorQuery()
    query.select("#image").boundingClientRect(function(res) {
      console.log(res.width)
      that.setData({
        height: res.width * 0.5 + 'px'
      })
    }).exec()
}

在css中设置图片的宽width:100%,在wxml中设置图片:

<image class='image' id='image' src='{{imageUrl}}' mode='aspectFill' style='height:{{height}}'></image>

此时,当我们设置图片父视图的宽为任意值,图片都会保持2:1的比例。

2、在自定义组件中,我们需要在ready方法中使用:
ready:function() {
    var that = this
    var query = wx.createSelectorQuery().in(this) //此处多了in(this)
    query.select("#image").boundingClientRect(function(res) {
      console.log(res.width)
      that.setData({
        height: res.width * 0.5 + 'px'
      })
    }).exec()
}

组件内CSS和WXML中设置和上方一样。

这里有一个封装好的组件的简单DEMO:

将封装好的组件放到scrollView内

将封装好的组件放到列表页内

只要设定好组件的样式,里面图片以及内容都能完美适配。

二、使用padding-bottom,overflow结合,具体参考这篇博客.

我照着做了,效果也出来了,但是当我放到scrollView中时,因为图片太高了(虽然看不出来),只是被隐藏了,所以导致scrollView被撑得非常高,只能设置scrollView的高度才能正常显示,但此时又显得不够动态了,所以我放弃了这种方式,推荐大家使用第一种。

我的博客即将搬运同步至腾讯云+社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invite_code=150afwwtin5bq

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Swift 回文链表 - LeetCode

    韦弦zhy
  • Swift:轻量级API的设计(一)

    Swift的最强大功能之一就是在设计API方面给我们提供了极大的灵活性。这种灵活性不仅使我们能够定义易于理解和使用的函数和类型,还使我们能够创建给人以非常轻量级...

    韦弦zhy
  • Swift 二叉树的最大深度- LeetCode

    韦弦zhy
  • iOS-CUICatalog: Invalid asset name supplied:

    用户1890628
  • Cozmo人工智能机器人SDK使用笔记(2)-显示部分face

    zhangrelay
  • 这 10 个技巧让你成为一个更好的 Vue 开发者

    我比较喜欢使用 Vue 来开发,所以有时会深入研究其功能和特性。 通过这篇文章,向你们介绍十个很酷的窍门和技巧,以帮助大家成为更好的 Vue 开发者。

    前端小智@大迁世界
  • Vue 开发必须知道的 36 个技巧【近1W字】

    Vue 3.x 的Pre-Alpha 版本。后面应该还会有 Alpha、Beta 等版本,预计至少要等到 2020 年第一季度才有可能发布 3.0 正式版; 所...

    火狼1
  • 解决WordPress图片生成多张缩略图的几种方法

    对于网站运营人员来说,网站备份是很重要的。最近我在备份网站数据时,也就几天时间,发现备份的压缩文件增加了好几十M,由于是新的网站,所以这种增长速度是非常快的。于...

    IDC科技
  • docker学习系列15 Docker在PHPStorm中的使用

    下面介绍怎么通过PHPStorm创建并运行一个docker容器项目,以Windows系统为例

    mafeifan
  • PHP随机显示图片代码

    新建一个目录,文件名叫img.把图片以1,2,3,4,5的命名规则放入目录中,就行了~

    爱游博客

扫码关注云+社区

领取腾讯云代金券