开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >专栏 >小程序image标签mode属性

小程序image标签mode属性

作者头像

薛定喵君

发布于 2019-11-06 03:35:13

发布于 2019-11-06 03:35:13

1.6K0

举报

文章被收录于专栏：薛定喵君薛定喵君

值	说明
scaleToFill	缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
aspectFit	缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
aspectFill	缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
widthFix	缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
top	裁剪模式，不缩放图片，只显示图片的顶部区域
bottom	裁剪模式，不缩放图片，只显示图片的底部区域
center	裁剪模式，不缩放图片，只显示图片的中间区域
left	裁剪模式，不缩放图片，只显示图片的左边区域
right	裁剪模式，不缩放图片，只显示图片的右边区域
top left	裁剪模式，不缩放图片，只显示图片的左上边区域
top right	裁剪模式，不缩放图片，只显示图片的右上边区域
bottom left	裁剪模式，不缩放图片，只显示图片的左下边区域
bottom right	裁剪模式，不缩放图片，只显示图片的右下边区域

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2019/06/06 ，如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

评论

登录后参与评论

暂无评论

编辑精选文章

换一批

万字详解高可用架构设计

Go 开发者必备：Protocol Buffers 入门指南

10分钟带你彻底搞懂分布式链路跟踪

多租户的 4 种常用方案

亿级月活的社交 APP，陌陌如何做到 3 分钟定位故障？

60页PPT全解：DeepSeek系列论文技术要点整理

微信小程序官方组件展示之媒体组件image源码

小程序 svg 微信 webview 数据结构

以下将展示微信小程序之媒体组件image源码官方组件能力，组件样式仅供参考，开发者可根据自身需求定义组件样式，具体属性参数详见小程序开发文档。

软件事业部

2022/10/10

1.1K0

【微信小程序】image组件的4种缩放模式与9种裁剪模式

容器腾讯云开发者社区

哈喽大家好，本次是微信小程序专栏的第九期。在项目中，我们经常要面对图片的尺寸结合设计图的尺寸不同的情况。在这种情况下，我们必须要有所舍弃，或放弃等比例，或裁剪掉图片的一部分。本期的主要内容是image组件的4种缩放模式与9种裁剪模式。注意：每期内容是连载呢，建议大家可以看看往期内容，更好理解噢~

颜颜yan_

2022/12/01

3.3K0

【微信小程序】image组件的4种缩放模式与9种裁剪模式

微信小程序开发实战（13）：图像组件（image）

height image src view width

image可以用来显示图像，这些图像可以是本地的，也可以是网络图像。例如，下面的布局代码显示了本地图像。

蒙娜丽宁

2020/07/24

3.7K0

微信小程序开发实战（13）：图像组件（image）

05-微信小程序常用组件-表单组件

2023腾讯·技术创作特训营第三期

微信小程序包含了六大组件：视图容器、基础内容、导航、表单、互动和导航。这些组件可以通过WXML和WXSS进行布局和样式设置，从而构建出丰富的小程序界面和交互体验。

度假的小鱼

2023/11/23

1.9K0

05-微信小程序常用组件-表单组件

uni-app&微信小程序图片组件的等比例缩放和自适应裁切显示

小程序微信 html

微信小程序的组件和普通的 HTML 有所不同，比如 HTML 的 div 在小程序里面是 view ，HTML 的 span 在小程序里是 text 。

德顺

2021/03/23

6.8K0

【愚公系列】2022年04月微信小程序-image图片

小程序微信 javascript

微信小程序的图片image支持 JPG、PNG、SVG、WEBP、GIF 等格式。

愚公搬代码

2022/04/07

6590

【愚公系列】2022年04月微信小程序-image图片

【愚公系列】2022年09月微信小程序-图片加载和全屏适配问题

小程序微信

在使用图片问题中可能会遇到各种各样的问题，比如图片加载不出来，图片显示在不同机型效果不同，图片加载展示问题等等。

愚公搬代码

2022/09/28

8230

【愚公系列】2022年09月微信小程序-图片加载和全屏适配问题

微信小程序基础

2023腾讯·技术创作特训营第三期

v-for ⇒ wx:for 注意点：wx:for=“{{list}}”默认每一项变量名为item；每一项索引变量名为index。与key同时用，wx:key="index"

星辰大海c

2023/11/19

2430

「小程序JAVA实战」小程序多媒体组件（27）

来说下，小程序的多媒体组件。源码：https://github.com/limingios/wxProgram.git 中的No.14 媒体组件 audio 可以在小程序嵌入一些音乐，歌曲，mp3什么的 image 任何小程序中必然会使用图片组件 video 视频组件，主要视频播放类的 camera 摄像头组件，新版才提供的 live-player 直播相关的，跟自媒体有关系，在线直播什么的。 live-pusher 直播相关的，跟自媒体有关系，在线直播什么的。重点说说image组件，其他大家看下官网就

IT架构圈

2018/12/26

8140

uni-app小程序开发-组件

app view 开发配置小程序

https://hellouniapp.dcloud.net.cn/pages/component/view/view

码客说

2024/07/22

1550

微信小程序入门之常用组件(04)

编程算法数据结构小程序微信 node.js

重点讲解微信小程序中常见的布局组件 view,text,rich-text,button,image,navigator,icon,swiper, radio,checkbox 等

海拥

2021/08/23

7360

WeChat 文章列表页面（一）

微信小程序微信小程序

本次的系列博文的知识点讲解和代码，主要是来自于七月老师的书籍《微信小程序开发：入门与实践》，由个人总结并编写，关于更多微信小程序开发中的各项技能，以及常见问题的解决方案，还请大家购买书籍进行学习实践，该系列博文的发布已得到七月老师的授权许可

Nian糕

2018/08/21

7860

WeChat 文章列表页面（一）

微信小程序分享18：image图片与video视频组件

image组件主要用于加载一个远程或本地图像，并进行各种缩放比例控制。最常用的三种：

LIYI

2022/03/08

1.8K0

微信小程序分享18：image图片与video视频组件

【微信小程序】button和image组件的基本使用

小程序微信 html 腾讯云开发者社区

image组件的mode属性用来指定图片的裁剪和缩放模式，常用的mode属性值如下：

hacker707

2022/10/31

1.3K0

【微信小程序】button和image组件的基本使用

如何使用小程序媒体组件

图片，视频，音乐是小程序使用中不可缺少的部分，这篇文章中，我们将介绍小程序媒体组件的使用。媒体组件分为audio音频组件，image图像组件，video视频组件，camera相机组件以及live-player、live-pusher小程序直播组件。其中直播权限需要相关资质的账号才能开通，本文暂不做介绍。其他组件我们将会以Hello World的demo形式做介绍。

a563831029

2018/11/07

4.9K0

微信小程序前端页面书写

数据结构图片标签编程算法

WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。

小小咸鱼YwY

2020/06/19

1.3K0

【愚公系列】2022年10月微信小程序-优购电商项目-小程序常见组件

数据结构编程算法小程序微信

mode 有效值： mode 有 13 种模式，其中 4 种是缩放模式，9种是裁剪模式。

愚公搬代码

2022/11/07

9250

css 编程算法小程序

view scroll-view swiper text rich-text progress

达达前端

2019/10/14

1K0

微信小程序的组件用法与传统HTML5标签的区别

微信小程序 html xml nat

小程序刚开放公测，互联网圈内开始了各种解读和猜测。其中有观点认为小程序和HTML5有着紧密关联，甚至小程序就是基于HTML5开发。

一墨编程学习

2018/09/14

2.3K0

微信小程序的组件用法与传统HTML5标签的区别

微信小程序【常用组件及自定义组件】

微信 html 小程序 node.js

微信小程序入门的文章，其实暂时就更新到这里了，还有一个生命周期的内容，感觉当初整理的不是很好就不更新了，学完了 WXML、WXSS、一些常用组件，还有事件绑定，其实一个较为不错的页面已经能自己搭建出来了，如果你还想继续往后面研究，我给一下方向就是，可以开始看与后台交互的内容了，发送异步请求，对数据进行回显等，回显内容时，你就又可以开始考虑用什么别的组件，可以让页面的数据加载或者观看更加顺滑，美观，当然有很多小伙伴都是后端，所以，可以自己搭个后台，试着弄用户登录授权这块，这块算是小程序一个重要的点，要好好研究一下，以后要做的事情，就和传统的后端基本一样了。我的文章都是根据官网写的原生写法，当然你也可以看一下一些小程序框架，或者看一看 ES6 的内容，毕竟我也是个后端，也没细细研究前端的内容，有什么想法或者意见，可以在公众号菜单页面直接给后台发文字，或者发送邮件：ideal_bwh@163.com

BWH_Steven

2020/09/18

1.9K0

相关推荐

微信小程序官方组件展示之媒体组件image源码

更多 >