精华内容
下载资源
问答
  • 缩放模式,不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素,相当于拉伸整个图片用来填满image标签的,类似填充的效果。 aspectFit 缩放模式,保持纵横比缩放图片,使图片的长边能完全显示出来。也...

    scaleToFill
    缩放模式,不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素,相当于拉伸整个图片用来填满image标签的,类似填充的效果。

    aspectFit
    缩放模式,保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。保持比例显示长度,会出现因高度不够的留白现象,就是图片没有填充整个image标签,上下两边出现白边。

    aspectFill
    缩放模式,保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。相当于拉伸长宽填充,多余部分进行裁剪效果,不能显示图片的完整性。

    widthFix
    缩放模式,宽度不变,高度自动变化,保持原图宽高比不变,拉高填充。

    top
    裁剪模式,不缩放图片,只显示图片的顶部区域

    bottom
    裁剪模式,不缩放图片,只显示图片的底部区域

    center
    裁剪模式,不缩放图片,只显示图片的中间区域

    left
    裁剪模式,不缩放图片,只显示图片的左边区域

    right
    裁剪模式,不缩放图片,只显示图片的右边区域

    top left
    裁剪模式,不缩放图片,只显示图片的左上边区域

    top right
    裁剪模式,不缩放图片,只显示图片的右上边区域

    bottom left
    裁剪模式,不缩放图片,只显示图片的左下边区域

    bottom right
    裁剪模式,不缩放图片,只显示图片的右下边区域

    展开全文
  • 微信小程序中,对于image组件在规定了宽度的view组件中,使用mode属性,展示出的图片下面出现滚动轴。这篇文章就是解释为什么会出现这个问题以及解决方案。

    微信在3月27发布新增的六大能力中开放申请个人开发者啦!!因为公司也要做小程序,现在趁着项目在客户那边还没确定,于是自己搞了一个pixiv(也就是P站)的app(这个app名字就叫做pixiv)转成微信的小程序来练手(github地址)。【注明:目前只是练手,至少我觉得我自己是不可能发布的,不然会被视为侵权(希望开发这个app 的 人如果看到了这个github地址觉得侵权可以联系我给撤下来)】

    这次要写的是image这个组件(注意是组件不是标签)。

    写这篇文章的目的,是因为我使用image组件的mode属性中取值为缩放的时候,在图片下方出现了滚动轴。另外就是本文章只是为了区分开mode属性中的取值问题,并不给你什么有用的或者现成的搭配。只能说,如果你也是在对mode属性存在一些疑惑的话,希望能在这篇文章受到一点提示。

    按套路,先上微信官方开发文档的截图


    可以看到,image这个组件有四个属性,这次针对mode属性和我所做的小程序中用到的图片结合讲一下。

    按照官方的mode,分为两类:一类缩放,一类裁剪。

    我所做的pixiv是需要大量图片的网站。P站供画手们上传自己的作品。图片有大有小,按照这个,我们要做的可以分成两种

    1、对上传上来的图片进行缩放(一般是缩小),放进我们规定好大小的格子中。

    2、对上传上来的图片进行裁剪,假设我们只需要整张图片的中间部分就可以了。

    因为上述的这两点还要针对小程序中的view组件和scroll-view组件区分,这个涉及到了对image的width的设定,现在先讲最普通的view组件。(对于scroll-view中出现的图片, 也会出现滚动轴的情况,链接在此:scroll-view中,image组件出现滚轴

    如图,现在我有一张这么大的图片,我只要放进这么小的格子里面。(看红框)



    按照分类点,我们来讲第一点(缩放)我做的时候出现的问题。

    (看下图)这个小格子并没有规定大小,它是一个weui-flex__item,也就是flex:1(在这里就是占据了整个横面的50%)。对于image这个组件本身,我设置了width:100%(待会来看看如果把这个100% 去掉会怎样)。对于我们要调整的这张图片,首先我们明确了是缩放,也就是从scaleToFill、aspectFit、aspectFill、widthFix这四个值中取。下面就是四种对应显示的样子(看图)。




    乍一看,scaleToFill和aspectFill就是我们要用的,但是感觉好像scaleToFill和aspectFill没有区别,展示的效果都是一样一样的。这就得说回我们刚才说的,有没有给image组件设置了width:100%的问题,下面就针对有无100%来区分。

    1、有设置image的width:100%

    aspectFill,有设置100%
    scaleToFill,有设置100%

    2、没有设置image的width:100%(可以看见,图片出现了横滚动轴)

    aspectFill,没有设置100%
    scaleToFill,没有设置100%


    一开始我做的时候,是没有给图片设置width为100%的,于是出现了滚动轴,还特别奇怪。调试一看,原来是图片原本的320px的宽度已经超出了格子的宽度,并且image组件自己已经设定好overflow:hidden(如图,没有设置width为100%的时候image的width)


    对于裁剪这个,应该就不用说了吧,这个很好理解。


    结论就是:使用aspectFill或者scaleToFill最好还是给image的width设置为100%,就不会在图片下方出现横滚动轴啦。


    展开全文
  • 微信小程序image组件开发程序以及相关图片问题参考资料汇总,希望对大家小程序开发能有一定的...微信小程序image组件必备基础知识:image组件默认宽度300px、高度225pximage的属性mode有13种模式,其中4种是缩放模...

    微信小程序image组件开发程序以及相关图片问题参考资料汇总,希望对大家小程序开发能有一定的参考和借鉴价值。以下汇总主要涉及到微信小程序image组件有关资源路径、缩放和剪裁模式等进行的探讨,无论是对微信小程序新手还是正在开发中的朋友都是很好的小程序学习资料。

    微信小程序image组件必备基础知识:

    • image组件默认宽度300px、高度225px
    • image的属性mode有13种模式,其中4种是缩放模式,9种是裁剪模式


    image组件开发教程汇总:

    微信小程序自定义组件实现图片单指拖动、双指缩放效果:http://www.henkuai.com/thread-37119-1-1.html

    微信小程序image组件的缩放模式介绍,以及图片滚动轴问题:http://www.henkuai.com/thread-37117-1-1.html

    微信小程序canvas图片加载问题,图片显示不出来的解决办法:http://www.henkuai.com/thread-37106-1-1.html

    微信小程序开发,图片在真机不显示的问题总结:http://www.henkuai.com/thread-37105-1-1.html

    微信小程序image宽度100%,高度自适应的方法:http://www.henkuai.com/thread-37104-1-1.html

    微信小程序加载本地图片方法汇总, 学习小程序开发必备:http://www.henkuai.com/thread-37097-1-1.html

    微信小程序开发之图片选择区域、屏幕裁剪等实现方法:http://www.henkuai.com/thread-37096-1-1.html

    微信小程序实现图片放大缩小,并截取图片指定区域的方法:http://www.henkuai.com/thread-37096-1-1.html

    微信小程序开发实现图片预加载组件,很实用的小程序功能:http://www.henkuai.com/thread-37087-1-1.html

    微信小程序开发,适用于微信小程序的图片预加载组件:http://www.henkuai.com/thread-37082-1-1.html

    微信小程序开发之背景图片绝对定位方法:http://www.henkuai.com/thread-37080-1-1.html

    微信小程序开发,图片自适应屏幕大小,屏幕适配办法:http://www.henkuai.com/thread-37079-1-1.html

    微信小程序image组件开发,binderror与js中的onerror区别:http://www.henkuai.com/thread-37078-1-1.html

    微信小程序实现image宽度比例自适应显示的解决方案:http://www.henkuai.com/thread-37076-1-1.html

    微信小程序,图片宽高自适应解决方案:http://www.henkuai.com/thread-37075-1-1.html

    微信小程序开发图片自适应并且支持多图实例教程:http://www.henkuai.com/thread-37068-1-1.html

    微信小程序实现图片上传、删除和预览功能的例子:http://www.henkuai.com/thread-37066-1-1.html

    微信小程序:图片等比缩放不变形,宽高自适应:http://www.henkuai.com/thread-37065-1-1.html

    微信小程序中实现手指缩放图片,手势缩放操作思路参考:http://www.henkuai.com/thread-37120-1-1.html

    微信小程序开发image固定宽高缩放导致变形问题的解决办法:http://www.henkuai.com/thread-37064-1-1.html


    image组件开发问题汇总:

    微信小程序image组件background-image手机不显示问题:http://www.henkuai.com/thread-22217-1-1.html

    微信小程序关于在手机端没有正常显示<view>中<image>的问题:http://www.henkuai.com/thread-26893-1-1.html

    微信小程序image加载服务器图片,当服务器图片不存在时,如何调用本地图片作为默认图片:http://www.henkuai.com/thread-19712-1-1.html

    微信小程序image的src读取不到wxfile://...的路径:http://www.henkuai.com/thread-16910-1-1.html

    微信小程序怎么使用代码更改前台的image的src的值:http://www.henkuai.com/thread-17561-1-1.html

    微信小程序开发遇坑总结,遮罩层滚动穿透和图片加载问题:http://www.henkuai.com/thread-36803-1-1.html

    微信小程序开发总结,微信小程序数据存储,图片上传等:http://www.henkuai.com/thread-36770-1-1.html

    微信小程序压缩图片办法:http://www.henkuai.com/thread-36660-1-1.html

    如何去除微信小程序image默认样式:http://www.henkuai.com/thread-36554-1-1.html

    微信小程序调用图片接口,出现渲染层网络层错误:http://www.henkuai.com/thread-36011-1-1.html

    微信小程序首次登录加载图片拉长问题:http://www.henkuai.com/thread-36168-1-1.html

    微信小程序图片显示问题,开发工具里显示图片正常,用手机打开,图片不显示:http://www.henkuai.com/thread-36163-1-1.html

    微信小程序生成分享图片如何实现:http://www.henkuai.com/thread-35502-1-1.html

    微信小程序怎么能够在保存图片的时候把canvas的背景色一起保存下来:http://www.henkuai.com/thread-35072-1-1.html

    微信小程序上传图片到后台文件名被篡改,如何解决:http://www.henkuai.com/thread-34387-1-1.html

    微信小程序请求的接口图片显示不出来:http://www.henkuai.com/thread-33892-1-1.html

    微信小程序图片裁剪和缩放的思路:http://www.henkuai.com/thread-19245-1-1.html

    微信小程序图片手势缩放功能怎么写:http://www.henkuai.com/thread-32932-1-1.html

    微信小程序长按保存图片怎么实现:http://www.henkuai.com/thread-32782-1-1.html

    微信小程序里面图片宽高写死的情况下变形怎么处理:http://www.henkuai.com/thread-32314-1-1.html

    微信小程序wxss中background使用背景图片无效的问题:http://www.henkuai.com/thread-23116-2-1.html

    微信小程序下载保存图片如何能在相册里看到:http://www.henkuai.com/thread-16924-1-1.html

    微信小程序图片上有热点,点击图片,怎么识别出点击的是热点:http://www.henkuai.com/thread-30937-2-1.html

    以上就是微信小程序image组件的相关资料整理,如果大家还有其他小程序图片问题的整理,欢迎分享。

    展开全文
  • html里的img 在小程序里是image 小程序里的图片默认是有宽高的 为了看的仔细 设置了黑色边框 <image></image> <image src="/images/1.jpg"></image> 默认图片是有被压缩变矮的 所以...

    html里的img 在小程序里是image

    小程序里的图片默认是有宽高的 为了看的仔细 设置了黑色边框

    <image></image>
    <image src="/images/1.jpg"></image>

    默认图片是有被压缩变矮的 所以这里就用到了image的mode属性

    mode值

    • scaleToFill  (默认值) 缩放模式 不保持纵横比缩放图片 使图片的宽高完全拉伸至填满image元素
    • aspectFit  缩放模式 保持纵横比缩放图片 使图片能完全显示出来 但是会有空白缝隙
    • aspecFill 缩放模式 保持纵横比图片 只保证图片的短边显示出来 也就是说 会有另一个方向将发生截取
    • widthFix 缩放模式 宽度不变 高度自动变化 保持原图宽高比不变
    • heightFix 缩放模式 高度不变 高度自动变化 保持原图宽高比不变
    <image src="/images/1.jpg" mode="widthFix"></image>

    展开全文
  • 微信小程序image属性 mode 的几种模式

    千次阅读 2020-01-02 13:12:52
    缩放 scaleToFill 不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素 缩放 aspectFit 保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。 缩放 aspectFill 保持...
  • 微信小程序image组件频闪问题

    千次阅读 2019-06-20 16:45:54
    解决微信小程序image组件mode=aspectFill造成的页面频闪问题
  • 微信小程序官方 image组件:https://developers.weixin.qq.com/miniprogram/dev/component/image.html 1.图片 宽100% 高auto,不变形; mode=“widthFix” <image class="vidimg" mode="widthFix" src="{{item...
  • 选择图片时可设置图片是否是原图,图片来源。这用的也挺常见的,比如个人中心中设置头像,可以与wx.upLoadFile()API使用 主要方法: ...<image src={{source}} mode=aspecFill xss=removed> js
  • 微信小程序image图片标签(超详细)

    千次阅读 2021-03-07 11:45:59
    微信小程序image图片标签 前言: 因为微信小程序静态打包的图片大小不可超过2m,故应该采取将需要用到的图片上传到网络,通过其链接来操作图片 推荐图床: 路过图床 1.scaleToFill标签: 默认值,不保持纵横比缩放...
  • 微信小程序 image 图片宽度100%,高度自适应 1.wxml &lt;image src='/pages/images/moonCake.jpg' mode="widthFix"&gt;&lt;/image&gt; 添加属性 mode="widthFix"
  • 最近在开发小程序的项目中,后台请求过来的是一堆尺寸比较大的图片,如果用image放在尺寸比较的盒子子,就会失真比较严重,图片也会变形,当时由于不知道imagemode属性 真是大费周章,但是效果还是不太好,最后问...
  • 微信小程序image图片懒加载 自己写个组件: 需求:滑到视野范围内才开始渲染加载图片 明天再写。。
  • 默认scaleToFill ... 缩放模式,不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素 aspectFit 缩放模式,保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可...
  • 微信小程序 - imagemode属性

    千次阅读 2019-08-29 22:04:10
    mode属性     scaleToFill 缩放模式(默认属性),不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素     aspectFit 缩放模式,保持纵横比缩放图片,使图片的...
  • 微信小程序image组件

    2019-05-28 20:34:00
    image组件:是小程序专门针对图片的组件,功能强大  image组件的属性:  src:类型 字符串 图片资源的路径  mode:类型 字符串 图片裁剪缩放模式  lazy-load:类型 布尔 图片的懒加载,在一定范围内...
  • 最近开发微信小程序,遇见image全屏的问题,发现高度100%后图片还是无法铺满全屏,在屏幕最下方有一个白色的空白条,甚是难看,查来查去,发现居然是小程序自带的bug,所以决定用css来解决,代码如下: wxml: ...
  • <image src=...class='in-image' mode='scaleToFill'> </image> <image src="http://img1.gtimg.com/comic/pics/hv1/106/212/2174/141418516.jpg" class='in-image' mode='aspectFit'>
  • 微信小程序image控件图片自适应

    千次阅读 2019-06-28 09:38:25
    因为最近iOS的工作量比较少,因此就和公司大牛开始了小程序开发,由于是新手,许多东西总是喜欢问问同事,免得走弯路,再问了同事之后...因为在iOS中aspectToSacle这个属性,因此我坚信在微信小程序里面应该也有类似...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,748
精华内容 3,099
关键字:

微信小程序imagemode

微信小程序 订阅