uni-app 图片适配动态计算图片高度

志在巅峰的攀登者，不会陶醉在沿途的某个脚印之中，在码农的世界里，优美的应用体验，来源于程序员对细节的处理以及自我要求的境界，年轻人也是忙忙碌碌的码农中一员，每天、每周，都会留下一些脚印，就是这些创作的内容，有一种执着，就是不知为什么，如果你迷茫，不妨来瞅瞅码农的轨迹。

如下所示，在不同屏幕尺寸下，我的图片展示比例始终为 1:1

1 首先是图片显示处理

<image mode="scaleToFill" class="swiper-image" :src="data:imageUrl":style="{height:imageHeight + 'px'}"></image>

mode 属性用来配置图片的缩放模式，描述如下

aspectFit 缩放显示图片全部
aspectFill 缩放填满容器，但是图片可能显示不全
widthFix 以宽度为基准，等比缩放长
heightFix 以高度为基准，等比缩放宽

2 动态获取屏幕宽度

我这里图片的宽度是填充屏幕的，所以图片的宽度等于屏幕的宽度，我的图片需要 1：1，所以我在这里只需要将我的图片的高度设置为等于屏幕宽度即可

<script>export default{data() {return {imageHeight: 280,}  },methods:{//这个方法可以在页面详情数据获取完成后如果有图片//需要显示时，再调用这个方法setImageHeight: function() {var _this = this;//获取系统数据uni.getSystemInfo({success: function(res) {//动态设置图片的高度_this.imageHeight = res.windowWidth;}});}}}</script>

点击查看

点击查看

uni-app 图片适配动态计算图片高度相关推荐

微信小程序动态计算图片大小
微信小程序动态计算图片大小方法一使用图片的mode属性手动计算给图片绑定事件bind:load,回调函数名为onImgLoad 编写回调函数,width为340是图片容器的宽度 method ...
【uni-app】动态计算图片高度且保持宽高比
前言图片容器宽度已确定图片加载后,将图片容器按照图片的宽高比设置高度思路图片容器宽度已确定. uni-app的image组件,将mode设置为scaleToFill(不保持纵横比缩放图片,使图 ...
【uni-app】动态计算图片高度
前言要求图片加载后,保持宽高比(16:9)且充满图片区使用uni-app的image组件,将mode设置为scaleToFill(不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素 ...
vue移动端通过px动态计算图片宽高_vue图片宽高自适应_移动web图片高度自适应的解决方案...
由于图片的加载是在dom加载完成之后进行的,于是,在手机端浏览网页时,经常会看到页面刚打开时很多内容叠在一起,当图片加载完成后,页面会由于图片加载完成出现明显的抖动针对这个问题,有以下几种解决方案 ...
Qt 编程指南 8 显示静态小图片和动态大图片
显示控件概览图片浏览示例第一行是一个标签控件,objectName 为 labelShow,文本内容清空,因为是用来显示图片用的. 主界面第二行的控件是四个普通按钮第一个按钮文本是 " ...
Android 动态计算ListView的高度
目录一.简介二.效果图三.代码实现一.简介在Android开发的过程中有的时候我们需要手动计算ListView的高度,比如说,ScrollView中嵌套ListView的时候,我们就需要手动 ...
uni.uploadFile上传手机内部图片
背景介绍在开发uni app项目的时候,有一个需求是,将安卓原生插件返回的图片,上传到服务器中. uni app中提供了一个图片上传的api,官网api: uploadFile, 但是插件返回的图 ...
android引导页图片全屏适配,关于图片适配不同尺寸的image View（实战）
分享人:广州华软佐罗一. 前言在前端开发过程中,设计稿中往往只提供一张图片,但是app内需要用到的尺寸各种各样. 同时图片不仅是信息的直接表达,也会为网站起到美观点缀的作用,图片的变形.过分裁切会 ...
vue mixins（vue3 hooks）动态获取div高度
之前转载过一篇文章: https://blog.csdn.net/qq_37167049/article/details/103084927 可以动态计算div 高度,但是比较繁琐的痛点是: 需要在每 ...

uni-app 图片适配动态计算图片高度

1 首先是图片显示处理

2 动态获取屏幕宽度

uni-app 图片适配动态计算图片高度相关推荐

最新文章

热门文章

uni-app 图片适配 动态计算图片高度

1 首先是图片显示处理

2 动态获取屏幕宽度

uni-app 图片适配 动态计算图片高度相关推荐

最新文章

热门文章

uni-app 图片适配动态计算图片高度

uni-app 图片适配动态计算图片高度相关推荐