使用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. php 如何创建uuid

    传统的创建uuid的方法是自己写个函数实现随机 <?php function create_uuid($prefix="") { $chars = md5(uniqid(mt ...

  2. 推荐给初级Java程序员的3本进阶书

    ImportNew 注: 原作者在这篇文章中介绍3本不错的技术书籍.作者认为这些书籍对新手或者学生而言尤其有帮助.通过一些基础性的教程入门后,我们可以使用Java做基础性的编程.然而,当我们需要从初级 ...

  3. Prometheus之系统安装,启动

    Prometheus简介Prometheus是最初在SoundCloud上构建的开源系统监视和警报工具包. 自2012年成立以来,许多公司和组织都采用了Prometheus,该项目拥有非常活跃的开发人 ...

  4. Blazor 组件库 BootstrapBlazor 中AutoComplete组件介绍

    AutoComplete组件介绍 AutoComplete组件和文本框基本上样子是一样的,只不过AutoComplete组件还带有一个下拉列表,可以从中选择对应的内容. 其同样继承自Bootstrap ...

  5. vue3 + pnpm 打造一个 monorepo 项目

    Monorepo 和 Multirepo 单一仓库(Monorepo)架构,可以理解为:利用单一仓库来管理多个packages的一种策略或手段:与其相对的是多仓库(Multirepo)架构 Monor ...

  6. 关于tomcat在idea上的中文编码问题

    一.问题引入 在国内,无论是新手还是有一定码龄的开发人员,汉字编码问题一直都是绕不开的魔咒,本文主要对tomcat在jetbrain系列产品idea上的乱码问题提供解决经验. 二.详情描述 新手在初学 ...

  7. OS之《线程管理》

    进程是系统资源分配的最小单位,线程是最小的执行单位. 然而,现在的高级设计底层还是基于这个理论基础实现的.比如java的线程,还有最新版本的JDK的协程都是在为了更好的让CPU执行任务. 线程是为了使 ...

  8. 问题解决:windows主机开机不插屏幕不能自动进入桌面

    操作系统一般都有这种设定,不论是windows还是Linux系统,那就是主机开机不插屏幕不能自动进入桌面操作系统一般都有这种设定,不论是windows还是Linux系统,那就是主机开机不插屏幕不能自动 ...

  9. Log4j2的JNDI注入漏洞(CVE-2021-44228)原理分析与思考

    https://www.freebuf.com/vuls/316143.html 前言 最近Log4j2的JNDI注入漏洞(CVE-2021-44228)可以称之为"核弹"级别.L ...

  10. NoSuchAlgorithmException

    今天在写UT时遇到了下面的问题: 1. 使用的powermock来处理static方法; 2. 静态方法里的却有使用到org.apache.http.client(4.3.1)的方法 异常如下: Ca ...