微信小程序 - 设置图片高度自适应（宽度固定）

我们要放入多张一样宽度不一样高度的图片的时候，我们不能同时都设置固定的高度，这样会使得一些图片被挤压或者有些会出现空白的现象，这些都不能满足我们的需求，所以我来说一下如何实现图片高度自适应。
我们只需要在image标签上面加上 mode=“widthFix” 即可
wxml文件：

<view class='det-img'><image mode="widthFix" src='../../images/detail/spins/50D-50DPearlChiffon/WechatIMG505.jpeg'></image>
</view>

css文件：

微信小程序 - 设置图片高度自适应（宽度固定）相关推荐

微信小程序 image图片组件实现宽度固定高度自适应
添加mode属性 <image class="empty-icon" src="/pages/image/list-emptyx2.png" mode=& ...
html微信图片自适应,微信小程序实现图片高度自适应
1. swiper轮播海报通过wx.getSystemInfo接口获取屏幕高度,高度依据图片宽高等比缩放运行于app.js,全局保存 // 设备信息 wx.getSystemInfo({ succe ...
ready等方法微信小程序_微信小程序设置图片固定比例
小编了解到,微信小程序成为当下热门话题,下面从多个方面来谈谈微信小程序设置图片固定比例 . 12月28日消息,微信官方日前发布消息称,为了让微信小程序相关成员在无线端更方便地管理微信小程序,将开发小程 ...
微信小程序中图片高度被压扁的解决办法
微信小程序开发中使用image标签展示的长图因为太长,就会被压扁变形,让人看起来很难看,那如何才能让图片的高度自适应呢?使用css的height:auto也没办法实现. 翻看了小程序社区的问答,发现了 ...
微信小程序：图片高度设置无效问题
控制台查看元素,显示其style中多了一个没有设置的高度值找了很久发现是因为image标签设置了mode="widthFix",此时高度会自适应,样式中设置高度无效
swiper高度自适应_小程序 swiper 图片高度自适应+预览图片
一.概述: 在开发小程序的项目中,经常会用到swiper这个轮播组件,但是使用的时候会有一个问题,swiper系统会默认一个高度而且是px为单位的,如下: swiper { display:block ...
微信小程序背景图片设置和图片自适应宽高
微信小程序背景图片设置和图片自适应宽高我们在开发过程中经常需要对一些元素设置图片为背景图片. 网络图片: .ServiceCenter{width: 100vw;height: 40vw;margi ...
关于小程序widthFix图片高度不能自适应的问题
微信小程序 Image 图片实现宽度100%或设置成某个rpx的值例如520rpx,高度自适应要如何设置呢? 一般做法如下: 样式设置宽度100%, .img{width: 100%; } 在图片组件 ...
微信小程序获取视口高度,设置 video 视频全屏显示
微信小程序获取视口高度获取视口高度可用于设置视频全屏显示效果及其他效果显示 js中:(可以在onLoad中直接使用,或写入方法中) let that = this;// 获取系统信息wx.ge ...

微信小程序 - 设置图片高度自适应（宽度固定）

微信小程序 - 设置图片高度自适应（宽度固定）相关推荐

最新文章

热门文章