微信小程序，图片居中显示，适配不同机型

最新推荐文章于 2024-04-29 10:58:50 发布

偌任

最新推荐文章于 2024-04-29 10:58:50 发布

阅读量8.7k

点赞数 2

CC 4.0 BY-SA版权

文章标签：微信小程序图片居中

本文链接：https://blog.youkuaiyun.com/ZJ_LONG/article/details/80618554

本文介绍了一种让图片在不同设备上居中显示并保持宽高比的方法，确保了良好的视觉体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

  <view style='width:100%;height:100%;text-align:center;' class="picture-2"> 
          <image style='width:94.5%;' class="infoImage"    src="/pages/image/2.jpg" mode='widthFix'>
          </image>    
     <view>

图片居中显示，适配不同机型

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

偌任

关注关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

微信小程序原生swiper高度自适应图片，不同屏幕适配，正方形1:1等比例图片轮播

coderYYY的博客

05-12

746

一开始只设了图片的发现还是不能完全显示图片，发现问题所在是swiper高度得设，不然默认就是150px，超出部分会被截掉，不会被图片自动撑开的。而轮播图片有时候是后台维护，不是固定的，这个高不能写死。网上其他教程思路是对的，但是是通过css的calc写死计算，不灵活本教程将动态获取图片宽高和适配不同屏幕计算出swiper的高我们可以获取图片在设备上的宽作为swiper高度就可以了首先，图片比例是固定的，比例=swiper 宽度 / swiper 高度 = 原图宽度 / 原图高度那么。

微信小程序开发中的多端兼容与适配

wx_linying1029的博客

07-11

1313

微信小程序开发中的多端兼容与适配是指在不同的终端设备上保持小程序的良好用户体验和功能完整性。由于不同设备的屏幕尺寸、操作方式、性能等差异，开发者需要针对各种终端进行适配和优化。多终端适配方案 微信小程序支持在多种终端上运行，包括手机、平板、智能电视等。

参与评论您还未登录，请先登录后发表或查看评论

微信小程序自定义navigationBar顶部导航栏适配所有机型（附完整案例）

10-15

主要介绍了微信小程序自定义navigationBar顶部导航栏适配所有机型（附完整案例），文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

小程序不同机型适配

Java学习博客

04-17

3821

用rpx!!! 不管是字体大小、边距、宽高等，单位一定要用rpx，它可以帮助你在不同机型下做到完美适配，用px的话你就等着哭吧。亲测各个机型rpx会完美适配。 .val-btn { color: #11a7fe; border-width: 1rpx; border-style: solid; border-color: #11a7fe; font...

[微信小程序]适配各个不同机型屏幕

iOSTianNan的博客

04-16

2万+

微信小程序该如何适配各个机型屏幕我们知道在原始设备中, iOS有pt,安卓有dp(密度无关像素), 但是无论在原生开发语言还是在React-native中, 我们处理屏幕适配, 都可以采用动态获取当前屏幕的方式计算比例, 动态设置真实的margin间距值, 以当前流行的iPhone 6 屏幕来说, 设计一般会基于这个屏幕尺寸来给出设计稿 (375*667) 当在不同的设备上时,(5s/6sp...

微信小程序让image图片居中显示和铺满全屏幕的方法

美奇软件开发工作室

10-24

1万+

wxml <view class='imagesize'> <image src="/images/1.png" mode="widthFix"> </image> </view> wxss 1、图片水平居中（屏幕顶部）： .imagesize{ display:flex; //flex布...

微信小程序图片文字居中显示

m0_57790713的博客

07-23

8547

居中文本

微信小程序-如何实现弹框相对手机屏幕始终居中显示且居中适配不同屏幕尺寸及机型【亲测有效，详细教程】

**My Coding Family**

03-17

5804

微信小程序-如何实现弹框相对手机屏幕始终居中显示且居中适配不同屏幕尺寸及机型，亲测有效，详细教程。包教包会

微信小程序自定义导航栏实例代码

12-01

在微信小程序开发中，为了实现更灵活的导航栏设计，我们常常需要自定义导航栏，以便解决默认导航栏带来的各种问题。例如，Android和iOS设备上页面标题的展示不一致，标题样式控制有限，以及左上角事件监听与定制的...

微信小程序封装自定义导航栏(兼容安卓及ios的手机型号)

weixin_46328739的博客

04-29

779

【代码】微信小程序封装自定义导航栏(兼容安卓及ios的手机型号)

微信小程序image图片自适应宽度比例显示的方法

08-10

微信小程序image图片自适应宽度比例显示的方法

微信小程序自定义导航栏兼容适配所有机型

青年码农

11-01

793

目前小程序已在前端占了一席之地，最近公司项目上用的就是小程序开发，由于功能及页面不是很多，所以直接原生开发，毕竟坑可能会少点，在开发过程中，小程序自带导航栏和客户的设计稿导航栏排在一起，感觉很别扭，因此要求去掉微信的自带导航栏，微信提供了这方面的api，接下来我们就实操。这是小程序官方文档截图，可以看到导航栏样式支持两种，默认是带导航栏，另外一种是自定义导航栏-custo...

微信小程序之图片处理（居中、铺满屏幕）附源程序

热门推荐

Ticky的博客

07-18

15万+

图片显示是小程序设计必须要经过的步骤，本人看到网上教学有限，现整理出自己设计过程中出现的问题，应该可以解决你遇到的问题。用最后给的完整代码，按照我的步骤一定能调试出来，不行再联系我。先给用到的代码以及效果图：先给home.wxml程序： <view class='imagesize'> <image src="/images/2.png" class='in-...

小程序图片处理居中、铺满屏幕

大家的blog

11-04

1232

<view class='imagesize'> <image src="/images/2.png" class='in-image' > </image> </view> 1.图片居中（屏幕顶部）： //.wxss里的参数 .imagesize{ display:flex; //flex布局 justify-content:...

微信小程序屏幕适配不同的iPhone

小天空的博客

12-27

9287

wx.getSystemInfo(Object object) | 微信开放文档 wx.getSystemInfo({ success (res) { console.log(res.model) console.log(res.pixelRatio) console.log(res.windowWidth) console.log(res.windowHeight) console.log(res.language) console.log(re..

小程序图片自适配

weixin_42593599的博客

09-11

1273

小程序里的图片长宽自适配,宽度一般是采用iphone6以后的手机为模型,宽度为750rpx,高度自适配;在别的型号时请自动调整代码 //这里是存放图片的swiper 组件 <swiper class='art-img' indicator-dots='{{indicatorDots}}' interval='{{interval}}' circular='{{circular}}' i...

小程序解决icon图片与文字不居中问题

hjj_flowers的博客

12-12

5060

在项目中其实这种小问题很常见，那就是图片和文字不是自己想要的那种居中效果，经常一上一下的很难看，这当然是不行的了，所以该怎么解决呢？使用flex布局可以解决这个问题。关键就在 align-items: center 1.wxml:  <view class="vote" style="background:pink"> <v...

微信小程序 居中、居右、居底和横向、纵向布局，文字在图片中间，网格布局

油焖茄子的博客

07-28

1万+

或者红色框加上：flex:1。//注意：这里的 height 写 100%会使得垂直居中可能会不生效。子类：display:inline/inline-block;需要知道控件的宽高，-100rpx为自身宽高（200）的一半。父类控件：position: relative;父类控件：position:relative;父类：text-align:center;水平居中B、相对父类控件–子控件绝对定位。子类控件：margin:0 auto;父类控件：display:flex;水平居中A：相对父类控件。

微信小程序：图片水平居中显示

qq_36911138的博客

12-22

1万+

在wxss文件中按下面代码写即可将图片水平居中。 .img1 { margin-top:100rpx; display:flex; justify-content: center; }

微信小程序底部按钮固定且居中

最新发布

02-26

### 实现微信小程序底部按钮固定并居中的布局为了使微信小程序中的按钮位于页面底部并且保持居中，可以采用 `position: fixed` 和 Flexbox 结合的方式。这种方式不仅可以让按钮始终停留在屏幕底部，还能确保其水平方向上处于中心位置。 #### WXML 文件结构首先，在 `.wxml` 文件内定义一个包含按钮的 `<view>` 容器： ```html <view class="footer"> <button type="primary">点击这里</button> </view> ``` #### WXSS 样式设置接着，在对应的 `.wxss` 文件里应用必要的样式规则来达到预期的效果： ```css /* 设置 footer 的基本属性 */ .footer { position: fixed; bottom: 0; width: 100%; background-color: white; /* 可选：防止内容遮挡 */ } /* 使用 flex 布局让子元素（即 button）水平居中 */ .footer button { margin-top: env(safe-area-inset-bottom); /* 解决 iPhone X 系列机型适配问题 */ } ``` 为了让整个视图区域不被固定的按钮覆盖住，还需要调整页面主体部分的距离。考虑到提到的按钮高度为46px (92rpx)[^1]，可以在页面主要内容下方增加相应的外边距： ```css .page-body { padding-bottom: 58rpx; /* 考虑到可能存在的安全区留白，适当加大一点 */ } ``` 这样做的目的是为了避免当软键盘弹起或其他情况导致视觉上的错位现象发生。最后，如果希望多个按钮在同一行显示且均匀分布，则可参照如下做法： ```html  <view class="footer"> <view class="buttons-container"> <button size="mini" class="btn-item">分享</button> <button size="mini" class="btn-item">评价</button> <button size="mini" class="btn-item">更多</button> </view> </view> ``` 配合 CSS 如下配置： ```css .buttons-container { display: flex; justify-content: space-around; /* 子项之间平均分配空间 */ align-items: center; /* 垂直居中 */ height: 92rpx; /* 统一设定容器高 */ } .btn-item { line-height: normal !important;/* 防止默认line-height影响*/ } ``` 上述方法利用了Flexbox强大的弹性盒模型特性[^4]，使得即使是在不同尺寸屏幕上也能很好地维持设计的一致性和美观度。