前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >微信小程序设置图片固定比例

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

作者头像
韦弦zhy
发布2018-09-11 11:58:29
5.3K0
发布2018-09-11 11:58:29
举报
文章被收录于专栏:韦弦的偶尔分享
今天介绍一个让图片在任何容器都保持固定比例的方法。

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

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

首先我百度到两种方法:

一、调用js操作DOM

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

1.没有封装组件时,我们可以在js文件中的onShow方法中使用:
代码语言:javascript
复制
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中设置图片:

代码语言:javascript
复制
<image class='image' id='image' src='{{imageUrl}}' mode='aspectFill' style='height:{{height}}'></image>

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

2、在自定义组件中,我们需要在ready方法中使用:
代码语言:javascript
复制
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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018.06.30 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 今天介绍一个让图片在任何容器都保持固定比例的方法。
  • 一、调用js操作DOM
    • 1.没有封装组件时,我们可以在js文件中的onShow方法中使用:
      • 2、在自定义组件中,我们需要在ready方法中使用:
      • 二、使用padding-bottom,overflow结合,具体参考这篇博客.
      相关产品与服务
      容器服务
      腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档