uni-app中如何让图片不带高度的自适应

最新推荐文章于 2024-05-15 11:16:58 发布
最新推荐文章于 2024-05-15 11:16:58 发布
阅读量1.6k 收藏 2
点赞数 1
分类专栏： uniapp 文章标签： uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013809856/article/details/122496893
版权

uni-app中如何让图片不带高度的自适应

 很明显的图片压缩变形了，一般在uni-app中图片需要给出高度，但是现在因为图片的大小高度不一致，所以怎么才能让图片自适应本身的高度呢？其实很简单，只需要在image加上 mode="widthFix"就可以啦

如图：

代码：

<view>
　　<image src="../static/img/index/banner1.png" mode="widthFix"></image>
</view>

大海之恋88
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
图片自适应 ，富文本解析
10-20
微信小程序源码，前端源码，简单展示源码，原生小程序源码 非uniapp，仅供参考，如有涉及版权问题请联系作者。微信小程序源码，前端源码，简单展示源码，原生小程序源码 非uniapp，仅供参考，如有涉及版权问题请联系作者。
uni-app 富文本编辑 回显富文本和修改富文本！
11-21
uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富...
uniapp的image标签发现系统有个默认的宽高
土拨鼠博客
07-27 7113
image标签发现系统有个默认的宽高 uniapp中image标签有个默认的宽高，会影响到image显示不正常。 解决办法：在image标签中加上属性mode=“widthFix”,就可以了。 <image style="width: 100%;" src="/static/img/banner01.jpg" mode="widthFix"></image> ...
uniapp小程序使用swiper-video-image组件不能实现图片自适应大小解决
最新发布
qq_52700250的博客
05-15 430
uniapp小程序 swiper-video-image image图片自适应，不压缩，不变形，原图填充
uniapp里background背景图自适应高度
RemindingMe的博客
11-21 987
【代码】小程序背景图自适应高度。
uni-app 图片自适应视图容器
qq_41410461的博客
06-21 4050
uni-app 图片自适应视图容器 uni-app中图片直接加background-size，等设置尺寸的属性无效 例 <view> <image style="background-size: contain; width: 20rpx;" src="/static/dataimg/caifeng.png"></image> </view> 原因 组件默认样式 ## 方法2种 <image>组件 1.设置mode 有效值 mode 有 13
uniapp 关于小程序图片高度不能自适应的问题[widthFix]
leyu_miss的博客
01-08 2665
uniapp 关于小程序图片高度不能自适应的问题[widthFix] 小程序的 Image 图片实现宽度为100%或设置成某个rpx的值时，高度自适应要怎样设置？
Uni-app 实现图片上传、删除、预览、压缩；
02-19
Uni-app 实现图片上传、删除、预览、压缩； 真正的开箱即用。
UNI-APP 中sqlite demo 增删查改
06-24
在 `UNI-APP` 中集成 SQLite 数据库可以帮助我们实现离线数据存储，这对于需要离线功能或需要提高数据读写性能的应用来说非常有用。本`SQLite` demo 演示了如何在 `UNI-APP` 中进行数据库的增删查改操作。 首先，...
uni-app调用Android原生可以实现通信及打开WiFi
01-13
在uni-app中，通过调用原生插件，我们可以实现与Android系统更深度的交互，比如控制WiFi的开启与关闭，以及其他一些特定的硬件操作。\n\n1. **调用原生插件原理**\n 在uni-app中，调用Android原生功能主要是通过`uni...
uni-app uni-data-picker 省市区数据表
06-16
<uni-data-picker> 是一个选择类datacom组件。支持多列级联选择。列数没有限制，如果屏幕显示不全，顶部tab区域会左右滚动。 适用于uni-app使用uni-data-picker实现省市区选择器的json数据
uni-app 中使用uni push的demo
02-21
【uni-app 中使用uni push的全面解析】 uni-app是一款由DCloud(海豚浏览器团队)开发的多端统一开发框架，它允许开发者使用Vue.js语法编写一次代码，就能跨平台运行到iOS、Android、H5、小程序等多个平台。而uni ...
uni-app
02-22
uni-app的组件库还包括列表、按钮、图片、表单等常见的UI元素，以及各种交互效果，使得开发者能够快速地搭建出符合设计稿的应用界面。 uni-app的跨平台能力得益于其基于Vue.js的语法体系，这使得熟悉Vue的开发者...
uni-app网易云音乐实战
10-22
在本文中，我们将使用uni-app框架来开发一个网易云音乐应用程序，涵盖了从开发环境的搭建到项目的创建、运行、配置tabBar、首页静态页面、推荐歌单和最新音乐等内容。 开发环境的搭建 uni-app开发环境的搭建需要...
uni-app登录实例的实现
10-29
总的来说，uni-app结合HBuilderX为开发者提供了高效且便捷的开发环境，实现登录功能并不复杂。通过理解uni-app的组件、API以及网络请求机制，开发者可以快速搭建起一个功能完善的登录系统。同时，不断学习和实践，...
uni-app-template:uni-app 通用模板
04-06
uni-app 通用模板官网地址 平台兼容说明模板说明：基于cli创建的轻量化项目模板，只保留vue最基础的使用方式，保证打包到多端时不需要作太多判断处理状态管理不建议使用vuex，因为会导致代码变得冗余，而且在编辑器...
uni-app rich-text图片自适应 宽度100%
qq_19484091的博客
05-21 1765
info = info.replace(/\<img/g, "<img style='width: 100%;'")
uniapp解决动态设置swiper轮播图高度的问题(不同图片数组高度不一致,数组内图片高度一致)
weixin_45562267的博客
11-03 3187
功能需求:不同数组的图片高度不一致,数组内图片高度一致的情况下,动态设置swiper高度 尝试过百度的获取图片高度的方法,发现获取高度不准确,后改用获取设备可视宽度和图片高度的方法解决 动态设置swiper高度的问题 原使用不准确代码: getElementHeight(element) { setTimeout(() => { let query = uni.createSelectorQuery().in(this); query.select(element).bou
uni-app 中 swiper 轮播图高度自适应
01-17
在uni-app中，可以通过以下两种方法实现swiper轮播图的高度自适应： 方法一： 在swiper组件的样式中，设置高度为宽度的一定比例。具体来说，可以使用calc()函数来计算高度，公式为：swiper高度 = swiper宽度 * 原图高度 / 原图宽度。例如： ```html <swiper class="swiper-box" indicator-dots autoplay circular> <swiper-item v-for="(item, i) in imgList" :key="i"> <image style="width: 100%" :src="item" mode="widthFix" /> </swiper-item> </swiper> ``` ```css .swiper-box { width: 100%; height: calc(100vw * 9 / 16); } ``` 方法二（推荐）： 使用uni-app提供的自定义组件swiper-plus，该组件可以自动计算图片的宽高比，并根据宽度自适应高度。具体使用方法可以参考uni-app官方文档。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值