使用mode =aspectFill

值	        说明
scaleToFill 缩放模式,不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素 图片会变形
aspectFit 缩放模式,保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。 图片会变形
aspectFill 缩放模式,保持纵横比缩放图片,只保证图片的短边能完全显示出来。 图片裁剪,不会变形
也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。
<view>
<text>图片aspectFill</text>
<image class="img-limt" mode='aspectFill' src="../../img/bg.jpg"></image>
</view> .img-limt{
width: 400rpx;
height: 400rpx;
}

使用mode =aspectFill

<view>
<text>aspectFit</text>
<image class="img-limt" mode='aspectFit' src="../../img/bg.jpg"></image>
</view>

小程序image图片缩小不变形的更多相关文章

  1. 微信小程序裁剪图片成圆形

    代码地址如下:http://www.demodashi.com/demo/14453.html 前言 最近在开发小程序,产品经理提了一个需求,要求微信小程序换头像,用户剪裁图片必须是圆形,也在gith ...

  2. 微信小程序实现图片是上传、预览功能

    本文实例讲述了微信小程序实现图片上传.删除和预览功能的方法,分享给大家供大家参考,具体如下: 这里主要介绍一下微信小程序的图片上传图片删除和图片预览 1.可以调用相机也可以从本地相册选择 2.本地实现 ...

  3. 「小程序JAVA实战」小程序头像图片上传(中)(44)

    转自:https://idig8.com/2018/09/09/xiaochengxujavashizhanxiaochengxutouxiangtupianshangchuan43/ 用户可以上传了 ...

  4. 小程序实现图片上传,预览以及图片base64位处理

    最近一段时间在做小程序项目,第一期功也完工了.需要好好总结一下经验,把项目中遇到的问题好好总结一下,遇到的问题,踩过的坑.今天写一个小程序实现图片上传,预览,以及删除,图片base64位处理.下面就是 ...

  5. 微信小程序 image图片组件实现宽度固定 高度自适应

    给img的mode设置值 注1:image组件默认宽度300px.高度225px 注2:image组件中二维码/小程序码图片不支持长按识别.仅在wx.previewImage中支持长按识别. mode ...

  6. 微信小程序实现图片双滑缩放大小

    在做小程序开发的过程中,后端传来一张图片地图,需要实现双手指滑动,使图片缩放,最终得出了一下代码: js : Page({ data: { touch: { distance: , scale: , ...

  7. 微信小程序天坑--图片汉字命名

    图片用汉字命名的,在开发者工具中是显示的,但是,在真机的微信中,是不会显示的. 大写的尴尬,微信小程序开发者工具对于做微信的UI来说,就是一个天坑,在电脑上漂漂亮亮的,到手机上各种意想不到的情况.

  8. [转]微信小程序实现图片上传功能

    本文转自:http://blog.csdn.net/feter1992/article/details/77877659 前端: 微信开发者工具 后端:.Net 服务器:阿里云 这里介绍微信小程序如何 ...

  9. 微信小程序 base64 图片 canvas 画布 drawImage 实现

    在微信小程序中 canvas drawImage API 传入的第一个参数是 imageResource 图片资源路径,这个参数通常由从相册选择图片 wx.chooseImage 或 wx.getIm ...

  10. 微信小程序之图片base64解码

    不知道大家在做微信小程序的时候遇到base64解码的问题,我之前在做微信小程序的时候遇到base64解析图片一直有问题,所以在这里把遇到的问题和解决方案在这里记录一下: 在平时的项目中我们是直接用ba ...

随机推荐

  1. sqli注入之sqlmap

    善于使用google hacking的搜索语法不失为一种有效的挖洞方法. 利用google浏览器inurl搜索语法寻找可能sql注入的php网站url inrul:productInfo.php?id ...

  2. SQLSERVER 2019数据库(可疑) 数据修复案例

    2019 数据库 , 在正常使用过程中 , 服务器突然断电 , 重新启动服务器后 , 数据库变为(可疑). [数据恢复故障分析] 由于数据库在正常读写操作过 , 服务器突然断电 , 导致数据库无法把所 ...

  3. luasql使用问题记录:module 'luasql.mysql' not found

    安装版本 # lua -v Lua 5.3.4 Copyright (C) 1994-2017 Lua.org, PUC-Rio # apisix version /usr/local/openres ...

  4. java——棋牌类游戏斗地主(webddz1.0)之一

    这是本人最近一段时间写的斗地主的java代码,大体框架都实现了,主要缺少,AI的智能算法. 本版本是在singleddz3.0的基础上修改的,修改为了网络版本. 主要修改代码如下: package c ...

  5. Java深度历险(一)——Java字节代码的操纵

    [编者按]Java作为业界应用最为广泛的语言之一,深得众多软件厂商和开发者的推崇,更是被包括Oracle在内的众多JCP成员积极地推动发展.但是对于Java语言的深度理解和运用,毕竟是很少会有人涉及的 ...

  6. Linux之命令提示神器tldr

    github:tldr-pages/tldr: Collaborative cheatsheets for console commands (github.com) 一款很好用的命令帮助工具, 之前 ...

  7. 【Java基础】-- instanceof 用法详解

    1. instanceof关键字 如果你之前一直没有怎么仔细了解过instanceof关键字,现在就来了解一下: instanceof其实是java的一个二元操作符,和=,<,>这些是类似 ...

  8. 什么是.NET的强类型字符串(Strongly typed string)?

    在.NET中,强类型字符串(Strongly typed string)并不是一个官方的概念,是指使用特定的结构来表示某种类型字符串数据的编码实践.类似于枚举,可以提供编译时检查类型,减少运行时错误, ...

  9. 算法(第四版)C# 习题题解——3.2

    写在前面 整个项目都托管在了 Github 上:https://github.com/ikesnowy/Algorithms-4th-Edition-in-Csharp 查找更方便的版本见:https ...

  10. Mac m1 安装 Homebrew

    Homebrew 是 Mac 的包管理器,类似于 Linux 中的 apt,Windows 中的 choco. 自从 M1 芯片发布,Homebrew 正在积极适配新架构,如今已经有了原生支持 ARM ...