AI 助理
文档备案控制台
开发者社区 云原生 文章 正文

小程序图片水平垂直居中显示在view中

2024-04-08 393
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 小程序图片水平垂直居中显示在view中

效果如下：无论图片多大  都是显示在容器view垂直居中，不拉伸

<view class="viewimage">
  <image src="/image/banner1.jpg" mode="aspectFit" class="myimage"></image>
</view>
.viewimage {
  width: 200px;
  height: 200px;
  background-color: black;
}
 
.myimage {
  width: 100%;
  height: 100%;
}


文章标签：
小程序
容器
关键词：
小程序view
小程序垂直居中
程序员一博
目录
相关文章
赣州云智科技的技术铺子
|
人工智能 小程序 前端开发
【一步步开发AI运动小程序】十九、运动识别中如何解析RGBA帧图片？
本文介绍了如何将相机抽取的RGBA帧图像解析为`.jpg`或`.png`格式，适用于体测、赛事等场景。首先讲解了RGBA图像结构，其为一维数组，每四个元素表示一个像素的颜色与透明度值。接着通过`uni.createOffscreenCanvas()`创建离屏画布以减少绘制干扰，并提供代码实现，将RGBA数据逐像素绘制到画布上生成图片。最后说明了为何不直接使用拍照API及图像转换的调用频率建议，强调应先暂存帧数据，运动结束后再进行转换和上传，以优化性能。
赣州云智科技的技术铺子
343 2
java冯坚持
|
小程序 JavaScript API
微信小程序开发之：保存图片到手机，使用uni-app 开发小程序；还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
java冯坚持
3997 0
微信小程序开发之：保存图片到手机，使用uni-app 开发小程序；还有微信原生保存图片到手机
Codelinghu
|
小程序 前端开发 JavaScript
小程序入门之认识view和text组件
小程序入门之认识view和text组件
Codelinghu
351 0
杀死一只知更鸟debug
|
小程序 容器
微信小程序常用组件的简单使用 view，scroll-view，swiper，swiper-item，text，rich-text，button，image
本文介绍了微信小程序中常用组件的使用方法，包括view、scroll-view、swiper与swiper-item、text与rich-text、button以及image组件。详细解释了各组件的功能、属性以及如何在小程序页面中进行使用。
杀死一只知更鸟debug
1565 0
微信小程序常用组件的简单使用 view，scroll-view，swiper，swiper-item，text，rich-text，button，image
sunyalei
|
小程序
小程序消除图片下边距的三个方法
小程序消除图片下边距的三个方法
sunyalei
540 167
格格的阿里云
|
运维 小程序 前端开发
小程序开发问题之在小程序中调用my.chooseImage接口让用户选择图片如何解决
小程序开发问题之在小程序中调用my.chooseImage接口让用户选择图片如何解决
格格的阿里云
368 0
肥晨
|
小程序 前端开发
uniapp微信小程序本地和真机调试文件图片上传成功但体验版不成功
【8月更文挑战第5天】
肥晨
1326 2
游客zi3qmblbcdexu
|
小程序 JavaScript 索引
微信小程序之动态添加、删除指定内容(view)和获取input值
【8月更文挑战第15天】
游客zi3qmblbcdexu
544 1
wishCoding
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的图片推荐系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的图片推荐系统附带文章源码部署视频讲解等
wishCoding
244 0
朝阳39
|
前端开发 小程序
【微信小程序-原生开发】实用教程20 - 生成海报（实战范例为生成活动海报，内含生成指定页面的小程序二维码，保存图片到手机，canvas 系列教程）
【微信小程序-原生开发】实用教程20 - 生成海报（实战范例为生成活动海报，内含生成指定页面的小程序二维码，保存图片到手机，canvas 系列教程）
朝阳39
1242 0

热门文章

最新文章

  • 1
    微信小程序--》小程序—自定义组件使用
  • 2
    影院购票|电影院订票选座小程序|基于微信小程序的电影院购票系统设计与实现(源码+数据库+文档)
  • 3
    微信小程序 - wxml 文件中模板语法不支持 indexOf 方法
  • 4
    小程序源码丢失了怎么在微信平台反编译找回
  • 5
    阿里云商标查询微信小程序上线（太方便了）
  • 6
    小程序如何助力传统行业变现升级？
  • 7
    微信小程序模板消息接口下线了，不用慌，调用统一服务消息接口来实现相同功能
  • 8
    微信小程序之授权登录以及授权登录流程讲解
  • 9
    uniapp微信小程序登陆流程（前端详细）
  • 10
    【微信小程序】-- 自定义组件 -- 创建与引用 &样式（三十二）
  • 1
    小心你的小程序被清退！小程序备案全流程攻略
    2381
  • 2
    基于微信小程序的企业职工薪资查询系统+ssm+vue.js附带文章和源代码设计说明文档ppt
    340
  • 3
    自驾游拼团小程序的+ssm+vue.js附带文章和源代码设计说明文档ppt
    236
  • 4
    基于vue和微信小程序的校园自助打印系统+springboot+vue.js附带文章和源代码设计说明文档ppt
    486
  • 5
    基于微信小程序的民宿短租系统+ssm+vue.js附带文章和源代码设计说明文档ppt
    422
  • 6
    基于微信小程序的家政服务预约系统的+php+vue.js附带文章和源代码设计说明文档ppt
    343
  • 7
    基于微信小程序的大学生科技竞赛管理系统的+springboot+vue.js附带文章和源代码设计说明文档ppt
    324
  • 8
    基于微信小程序的宠物寄养平台的+ssm+vue.js附带文章和源代码设计说明文档ppt
    317
  • 9
    基于SSM框架的童装购买平台微信小程序+vue.js附带文章和源代码设计说明文档ppt
    206
  • 10
    基于微信平台健身小助手小程序的+ssmt+vue.js附带文章和源代码设计说明文档ppt
    222

    • 相关课程

    更多
  • IoT小程序框架课程

    • 相关电子书

    更多
  • 云上快速构建小程序创业祝犁
  • mPaaS 小程序重磅发布
  • 15分钟打造你自己的小程序
    • 下一篇
    阿里云正式发布 Agentic 代码安全：AI驱动的双Agent协同引擎