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

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

有时我们的图片并不是同一个比例,但是我们需要设置图片保持一个固定的比例,在小程序里面因为宽度固定为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 条评论
登录 后参与评论

相关文章

来自专栏刘望舒

React Native组件(三)Text组件解析

前言 此前介绍了最基本的View组件,接下来就是最常用的Text组件,对于Text组件的一些常用属性,这篇文章会给出简单的例子以供学习。 1 概述 Text组...

2496
来自专栏练小习的专栏

css实现未知宽度的正方形需求

今天群里有哥们问了一下,百分比宽度的正方形如何用css实现。其实就是不定宽的正方形如何用css实现。 第一个方法利用图片的等比例缩放,用base64写一个1*1...

2366
来自专栏pangguoming

使用svgdeveloper 和 svg-edit 绘制svg地图

目录: 1. 描述 2. 准备工作 3. 去除地图模板上的水印(可跳过) 4. 方法一、SVGDeveloper 5. 方法二、SVG-Edit 1. 描述 有...

5395
来自专栏知道一点点

【原创】bootstrap框架的学习 第七课 -[bootstrap表格]

<!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 基本的表格</title> <link hr...

1162
来自专栏Java帮帮-微信公众号-技术文章全总结

Web-第一天 HTML【悟空教程】

一天的学习需要使用众多独立没有关联的标签,为了大家更好的吸收,现给出标签总览,以“重要程度”排序。例如:“表格标签”为今天最重要的标签。

3105
来自专栏猛牛哥的博客

快手( AAuto Quicker ) v6.5.06更新记录

1313
来自专栏韩东吉的Unity杂货铺

零基础入门 10: 编辑器下的UGUI Image

Image组件是Unity里显示图片的组件,可以将Sprite类型的图片显示在Canvas下。

1221
来自专栏我和未来有约会

Silverlight初级教程-动画

Silverlight初级教程 动画 在这一节里将要用到在“认识工作区”中提到的时间抽了。这里将和学习flash的过程一样做一个最简单的动画。 ...

19110
来自专栏岑志军的专栏

ReactNative-综合案例(01)

1393
来自专栏Google Dart

AngularDart Material Design 是/否 按钮 顶

可以使用MaterialSaveCancelButtonsDirective等指令来提供基本文本自定义,该指令用保存/取消替换是/否。

1795

扫码关注云+社区

领取腾讯云代金券