uni-app如何让图片高度自适应

最新推荐文章于 2024-06-13 14:19:27 发布
最新推荐文章于 2024-06-13 14:19:27 发布
阅读量2.9w 收藏 12
点赞数 10
分类专栏： uni-app 文章标签： image uni-app height
原文链接：http://dt2008.cn/160/
版权

在uni-app框架中，图片image标签是自带默认高度的，在下方图片可以看到，一个正方形的图片，初始化被设置了240px高度
在这里插入图片描述
uni-app如何让图片高度自适应

有很多大佬就在想了，定义个图片高度不就行了吗？除了在图片设置个高度还有一个方法，就是在iamge标签里定义 mode=”widthFix 就行了

    <image src="../../static/logo.png" mode="widthFix></image>

功能效果：
在这里插入图片描述
uni-app如何让图片高度自适应

这样就可以让图片高度自适应，为什么要让他自适应呢？因为做到瀑布流布局就会用到的。

希望这篇文章对您有帮助

东泰丶
关注
  • 10
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
uniapp 图片自适应不压缩
m0_61672533的博客
01-04 1796
uniapp 图片自适应不压缩
Vue uniapp实现图片宽度100%、高度自适应的效果
qq_52099965的博客
03-26 1万+
Vue uniapp实现图片宽度100%、高度自适应的效果
uni-app的页面样式与布局
最新发布
qq_58530039的博客
06-13 783
在不同密度的屏幕上，1rpx 会被转换成不同的物理像素数，保证在不同屏幕下的显示效果一致。1、注册登录阿里巴巴矢量图标库，找到自己想要的图标，加入购物车，然后新建一个项目，把购物车的图标加入项目中，然后进入自己的项目图标，复制css代码。若背景图大于40KB,不建议使用，若执意使用的话，需要手动将其转换为base64格式使用，或最好将其上传到服务器上面，通过网络路径来引用。百分比是相对长度单位，基于父元素的大小来定义元素的大小。2、把下载的字体图标放置到uni-app项目的static目录中。
uniapp 小程序实现图片宽度100%、高度自适应的效果
cwb_2120的博客
10-14 1869
因为image组件默认是有宽度跟高度的，所以这个高度不怎么好写。通过@load事件来控制图片的高度。话不多说，直接上代码，
【uniapp 图片展示自适应，等比例缩放】
热门推荐
qq_39236283的博客
11-11 1万+
uniapp 图片等比缩放
uniapp高度自适应，image标签中加上 mode=“widthFix“即可
xx820702的博客
08-06 936
uniapp高度自适应，image标签中加上 mode="widthFix"即可
uniapp——图片自适应、图片保持大小兼容各设备
努力、拼搏、奋进
10-09 5583
uniapp——图片自适应、图片保持大小兼容各设备
uni-app项目练习2
05-16
需要学习如何使用uni-app的自适应布局，如px转rpx，以及如何实现响应式设计。 5. **数据绑定与状态管理**：uni-app基于Vue.js，所以可以使用vue的数据绑定、计算属性、方法、生命周期钩子等。此外，对于大型项目，...
uni-app微信小程序生成海报.rar
02-07
- 高度自适应：在微信小程序中，考虑到不同设备屏幕尺寸，需要使用uni-app的flexible插件或vw/vh单位实现海报的高度自适应。 7. **事件监听与交互** - 用户触发生成海报：添加按钮点击事件，调用生成海报的方法。...
基于uni-app开发的新闻和资讯类App模板
02-22
6. **响应式布局**：uni-app支持Flexbox布局，可以实现自适应不同设备屏幕大小的设计，保证在不同设备上的良好显示效果。 7. **性能优化**：通过懒加载、预加载等技术，优化图片加载速度，提高用户体验。同时，合理...
适合uni-app 使用的echarts图表组件，开箱即用！
09-23
综上所述，这个uni-app的ECharts图表组件是一个高效、便捷的数据可视化工具，它通过将ECharts与uni-app的Vue.js组件模型相结合，让开发者能够在uni-app项目中轻松地创建各种复杂的图表，且无需担心平台兼容性和性能...
uniapp swiper 图片高度根据图片宽度自适应+通过选项卡跳到锚点位置+滑动到某个要素位置添加事件
04-15
uniapp swiper 图片高度根据图片宽度自适应； 通过选项卡跳到锚点位置，类似h5单页面通过a链接导航效果； 滑动到某个要素位置时触发事件，如tab选项卡值更改等
uniapp image 图片自适应
Start的小笔记
06-28 7600
用了uniapp nvue上你会发现图片的高度无法自适应，只能使用api提供的 mode这几个东西，也不支持css width:100%,写死又可以，开发写死就不对了，通过高度计算修改图片样式 1、看到：style，用过vue的都知道这个是改样式的 <image ref='dd' class="directory_bg" src="../../static/image/directory/directory_bg.png" :style="imageBgStyle" /> data(){ .
uniapp使用v-html调用接口，富文本图片 视频自适应大小
m0_49714202的博客
12-06 1695
uniapp使用v-html调用接口，富文本图片 视频自适应大小
uni-app中如何让图片不带高度的自适应
u013809856的博客
01-14 1685
uni-app中如何让图片不带高度的自适应 很明显的图片压缩变形了，一般在uni-app中图片需要给出高度，但是现在因为图片的大小高度不一致，所以怎么才能让图片自适应本身的高度呢？其实很简单，只需要在image加上mode="widthFix"就可以啦 如图： 代码： <view> 　　<image src="../static/img/index/banner1.png" mode="widthFix"></image> </vi..
【uniapp-小程序 富文本展示让图片自适应】
weixin_47416539的博客
09-21 372
【代码】【uniapp-小程序 富文本展示让图片自适应】
【uniapp】文本缩略显示&img自适应
Minions_Fatman的博客
08-31 791
<template> <view> <uni-navbar fixed="true" title="文本缩略显示&img自适应" backgroundColor="#4683ff" color="#ffffff"> <view slot='left' class="pd-l-20 nav_left" @click="navBack()"> <image src="/static/images/back2.png"></im
uni-app rich-text图片自适应 宽度100%
周小仙女的博客
12-30 1521
this.detailHtml = res.data.data.product.detailHtml.replace(/\<img/g, "<img style='width: 100%;'")
关于uniapp中长图片父盒子宽度自适应的需求实现
March_Mango的博客
11-19 2595
先说结论： 绑定图片加载函数获得每张图片的宽高，然后通过屏幕大小和图片大小等比例缩放，计算得出每张图片的宽度：每张图所需宽度= 图片真实宽度/(图片真实高度/屏幕高度) 父盒子把每张图宽度相加，然后监听窗口的resize，重新赋值给父盒子宽度就行。 （代码直接看下面第三点） 1、需求 我要实现不同长度的图片拼接成一个连续的长图，就是高度不变，可以横向滚动的图片。 2、实现 首先我以为设定了图片height:100vh就好了，然后图片宽度可以自己进行自适应。然而，运行后的uni-image的
uni-app自定义指令实现自适应 DPR 加载图片
06-06
在uni-app中，可以通过自定义指令来实现自适应DPR加载图片。具体步骤如下： 1. 在项目的`main.js`中注册自定义指令： ```javascript import Vue from 'vue'; import App from './App'; Vue.config.productionTip = false; // 注册自定义指令 Vue.directive('adapt-img', { bind: function (el, binding) { let dpr = window.devicePixelRatio; let value = binding.value; if (value) { if (dpr >= 3 && value.indexOf('@3x') !== -1) { el.setAttribute('src', value.replace('@3x', '')); } else if (dpr >= 2 && value.indexOf('@2x') !== -1) { el.setAttribute('src', value.replace('@2x', '')); } else { el.setAttribute('src', value); } } }, }); App.mpType = 'app'; const app = new Vue({ ...App, }); app.$mount(); ``` 这里注册了一个名为`adapt-img`的自定义指令，当该指令绑定到元素上时，会根据当前设备的DPR加载对应的图片。 2. 在需要使用自适应DPR加载图片的地方，将自定义指令`adapt-img`绑定到`<img>`标签上，并设置图片路径： ```html <template> <div class="demo"> <img v-adapt-img src="@/static/img/demo@3x.png" /> </div> </template> <style> .demo img { width: 100px; height: 100px; } </style> ``` 这里将自定义指令`adapt-img`绑定到`<img>`标签上，并设置图片路径为`@/static/img/demo@3x.png`。在绑定指令时，可以将图片路径作为指令的值传递过去。 3. 在图片文件夹中，只需要提供@2x和@3x倍图即可，不需要提供@1x倍图。 这样，当页面加载时，自定义指令会根据当前设备的DPR加载对应的图片，如果当前设备的DPR为1，则会加载原始图片。 需要注意的是，如果图片文件名中包含了`@2x`或`@3x`，需要在指令中进行判断并替换。如果图片文件名中没有包含`@2x`或`@3x`，则直接加载原始图片。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值