最近接触到了一点小程序的东西,跟我们平常的HTML还真不太一样,这里我先大概讲一下图片的显示问题,

小程序的图片用的是<image><image/>标签,他默认的大小是宽300px,高225px。那我们如果用图片的话,肯定不能用默认的大小,那image常用的除了src属性之外,还有一个mode属性,他有4中缩放模式,9种剪裁模式,如果我们想把图片完全显示出来的话,就用 widthFix,宽度不变,高度自动变化,保持原图宽高比不变,下面我有两种方法可以显示完整不被拉伸的图片,

第一种,图片被父元素包裹,父元素设置宽度(小程序的单位是rpx,会自适应不同屏幕的大小),图片的宽度为100%,加上属性mode='widthFix',

  <view class='btn'>
<image src='../image/share.png' mode='widthFix'></image>
</view>
.btn{
width: 60%;
background: none;
}
.btn image{
width: 100%;
}

  

第二种,图片加上属性mode='widthFix',然后给图片自己设置宽度

<image src='../image/bg.jpg' class='bg' mode='widthFix'></image>
.bg{
display: block;
width: 100%;
}

  

这两种方法都可以实现,自己选用哪一个喽

小程序的image图片显示的更多相关文章

  1. 微信小程序点击图片放大预览

    微信小程序点击图片放大预览使用到 wx.previewImage 接口,可以放大.上/下一张 上代码 wxml代码 <view class='content-img' wx:if="{ ...

  2. Visual Studio 2017中使用正则修改部分内容 如何使用ILAsm与ILDasm修改.Net exe(dll)文件 C#学习-图解教程(1):格式化数字字符串 小程序开发之图片转Base64(C#、.Net) jquery遍历table为每一个单元格取值及赋值 。net加密解密相关方法 .net关于坐标之间一些简单操作

    Visual Studio 2017中使用正则修改部分内容   最近在项目中想实现一个小工具,需要根据类的属性<summary>的内容加上相应的[Description]特性,需要实现的效 ...

  3. 微信小程序简单封装图片上传组件

    微信小程序简单封装图片上传组件 希望自己 "day day up" -----小陶 我从哪里来 在写小程序的时候需要上传图片,个人觉得官方提供的 Uploader 组件不是太好用, ...

  4. 微信小程序使用本地图片在真机不显示的问题

    最近做的小程序,在真机测试发现有些本地图片在开发工具上可以显示,但是在真机上预览的时候不能显示 代码是这样写的 <view class='seat-size' wx:for="{{it ...

  5. 微信小程序 base64格式图片的显示及保存

    当我们拿到如下base64格式的图片(如下图)时, base64格式的图片数据: 如何显示 ? 使用image标签,src属性添加data:image/png;base64, (注意:若imgData ...

  6. 微信小程序movable-view移动图片和双指缩放

    先从movable-view开始说起吧. movable-view是小程序自定义的组件.其描述为:"可移动的视图容器,在页面中可以拖拽滑动". 官方文档地址:https://mp. ...

  7. 微信小程序开发之图片预览

    实现图片的展示和大图预览 使用wx.previewImage(OBJECT)来实现 OBJECT参数说明: 参数 类型 必填 说明 current String 否 当前显示图片的链接,不填则默认为 ...

  8. 微信小程序生成指定页面小程序码海报图片分享思路总结

    本博客主要说下思路,具体代码不贴 1.考虑到组件复用,所以我把它做成一个自定义的组件 <my-poster id="getPoster" avater="{{ima ...

  9. 微信小程序点击图片全屏

    作为一个只懂简单HTML,jQuery,JS的web后台开发者,最近在学习小程序开发,现在将小程序的点击全屏功能的相关内容记录下来.如果有不对的地方或者有更简单的方法,请留言指教 0_0~ .js 文 ...

随机推荐

  1. c语言1作业07

    这个作业属于那个课程 C语言程序设计II 这个作业要求在哪里 https://edu.cnblogs.com/campus/zswxy/CST2019-4/homework/9932 我在这个课程的目 ...

  2. [转帖]56核Xeon Platinum 9200现身 - 英特尔有史以来最大的CPU封装

    56核Xeon Platinum 9200现身 - 英特尔有史以来最大的CPU封装 https://www.cnbeta.com/articles/tech/835271.htm 当英特尔宣布上周正式 ...

  3. L2-001. 紧急救援(迪杰斯特拉算法)

    L2-001. 紧急救援 时间限制 200 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 作为一个城市的应急救援队伍的负责人,你有一张特殊的全国 ...

  4. ubuntu 安装mysql5.7

    一.Windows mysql5.6 解压版 安装 关于widnows平台上的安装教程,可参考百度经验: 链接:https://jingyan.baidu.com/article/f3ad7d0ffc ...

  5. c# 模拟post登录

    使用模拟登录大致可以分为两步 一.post登录获取cookis public CookieContainer GetCookie(string url,string account,string pa ...

  6. 使用vue-cli构建vue项目流程

    下载: nodejs 安装 npm vue-cli -g 生成项目 vue init webpack elementui2 (elementui2是我的项目名称) 进入项目 cd elementui2 ...

  7. ES6拷贝方法

    ES6 中对象拷贝方法: 方法一: Object.assign() // 对象浅拷贝, 复制所有可枚举属性 const obj1 = {a: 1}; const obj2 = {b: 2}; // c ...

  8. 字符串的 Base64 加密和解密

    base64加密: FORM encode_base64 USING p_business “字符串string CHANGING p_base64. DATA l_xstring TYPE xstr ...

  9. [转载]【转】乘法器的Verilog HDL实现

      乘法器如果直接用*来实现的话,会消耗很多的资源.所以有了串行和并行两种实现思路.用串行的话,8位一般会有8位以上的延迟,但是消耗的资源是最少的.低速数据处理比较适合.并行也就是流水线方法,以时间换 ...

  10. Linux RAID磁盘阵列

    RAID磁盘阵列 什么是RAID RAID是磁盘阵列的英文缩写,多块磁盘组成了一个组合,一起完成存储任务,就是磁盘阵列. RAID几种常用的类别(组合) RAID0:条带卷:最低磁盘个数2+,空间利用 ...