微信小程序图片在不同设备显示保持图片比例并且居中

最近都在开发微信小程序，碰到一个这样的问题，就是图片在不同尺寸手机要求不被压缩（长宽之比不变），并且上下左右居中，效果图如下（左iPhone 7Plus，中iPhone 7，右iPhone X）：

刚开始用px为单位，其实也可以，效果不是很好，于是改用vw（设备的宽度）和vh（设备的高度）了。

1vw=1%宽度，1vh=1%长度，下面是我在项目里面的代码：

demo.wxml:

<view class="tipPanel" style="display:{{display}}"><image src="/images/close.png" class="close" bindtap='closeTip'></image><image src="/images/tip.png" class="tipImage"></image>
</view>

demo.wxss:（主要看.tipPanel .tipImage里面的）

.tipPanel{box-sizing: border-box;transition: 0.5s;position: relative;z-index: 2;background: rgba(0,0,0,0.7);width: 100vw;height: 100vh;
}
.tipPanel .close{position: absolute;z-index: 4;width: 8vw;height: 8vw;top: 50%;right: 50%;margin-top: -58vw;margin-right: -40vw;
}
.tipPanel .tipImage{position: absolute;width: 84vw;height: 120vw;z-index: 3;top:50%;left: 50%;margin-top: -60vw;margin-left: -42vw;
}

比较巧妙，height和width都用vw作单位，这样就保持了比例不变。

居中的方法很多，针对我这个要求，先绝对定位（定位是定这个块左上角的那个点），上和左都50%，然后再左移自己宽度的一半和上移自己高度的一半，不懂意思的可以自己动手画一画。

微信小程序图片在不同设备显示保持图片比例并且居中相关推荐

微信小程序安卓系统下不显示BASE64图片问题
<image>标签中的data属性必须写为:image/png 不能是img/png 或者是jpg等其他格式 that.setData({ captchaImage: 'data:i ...
微信小程序背景图真机显示不了
微信小程序在本地开发工具正常显示图片(包括背景图),在真机显示不了,常见的几种情况: 1.微信小程序背景图真机显示不了微信小程序如何设置背景图片? | 微信开放社区微信小程序设置背景图片不显示问题 ...
微信小程序加载并且编译显示富文本编辑器内容
微信小程序如何加载并且显示百度编辑器中的内容一. 下载wxParse文件夹放在根目录下(可以随意更改位置,只要后续能引入成功即可) 二. 在js文件中引入wxParse.js var WxParse ...
微信小程序中苹果iOS手机显示时间格式NaN不正确的问题
项目场景: 实现安卓Android和苹果iOS中微信小程序显示订单时间信息问题描述微信小程序中苹果iOS手机显示时间格式NaN不正确的问题原因分析: 安卓微信小程序显示正常,苹果按格式YYYY- ...
微信小程序关注公众号模板显示隐藏问题
微信小程序关注公众号模板显示隐藏问题最近做了一个微信小程序内跳转关注公众号的需求,本来按照API的写法是可以直接搞定的.但是产品需求是要点击按钮之后,再弹出关注公众号组件,然后点击关闭按钮之后要关掉 ...
微信小程序壁纸源码+自动采集小米图片
简介: 小程序内核里面对接的是小米壁纸,自动采集无需自己手动上传,而且可以搜索的内容很多,各种类型的壁纸图片都是有的. 搭建方法: 1,注册微信小程序,类目选工具_图片. 2,将源码导入开发者工 ...
微信小程序：video标签默认显示视频的第一帧作为封面
微信小程序:video标签默认显示视频的第一帧作为封面 <video src="video_url"controls="{{false}}"initial ...
uniapp微信小程序服务器与行内img src图片路径拼接
uniapp微信小程序服务器与行内img src图片路径拼接 1.在main.js 在行内直接引入运行就可以连接到服务器的图片了
微信小程序云存储中调用fileid作为图片路径，无法正常显示解决方法
教同学们写一个图片瀑布流的微信小程序,图片是放到云存储中的,大多数同学都没有问题,有个别同学出现了下方的问题,图片无法正常显示查阅了官方的资料,发现image组件的src从2.3.0 起开始支持云文 ...

微信小程序图片在不同设备显示保持图片比例并且居中

微信小程序图片在不同设备显示保持图片比例并且居中相关推荐

最新文章

热门文章