微信小程序设置图片保持原有比例

约定不等于承诺〃 2023-05-21 07:23 18阅读 0赞

## 微信小程序设置图片保持原有比例 ##

.wxml文件

<block wx:for="{
       {swiper}}" wx:key="index">   
    	<view class="picture_introduction_picture">    
    		<image src="{
       {item.image}}" data-index="{
       { index }}"  bindload="realImageLoad" style="width:{
       { images[index].width }}rpx; height:{
       { images[index].height }}rpx;"/>   
    	</view>  
    </block>

.js文件

Page({   
     data: {
         images:{}  
          }, 
    	realImageLoad: function(e) {
    	    var $width=e.detail.width,    //获取图片真实宽度
    	        $height=e.detail.height,   //获取图片真实宽度
    	        ratio=$width/$height;    //图片的真实宽高比例
    	    //var viewWidth=718,           //设置图片显示宽度，左右留有16rpx边距
    	    //viewHeight=718/ratio;    //计算的高度值
    	     var image=this.data.images; 
    	     //将图片的datadata-index作为image对象的key,然后存储图片的宽高值
    	     image[e.target.dataset.index]={
    	        width:$width  , //viewWidth
    	        height: $height         //viewHeight
    	     }
    	     this.setData({
    	          images:image
    	     })
    	 }
     })

发表评论取消回复

表情：

评论列表（有 0 条评论，18人围观）

还没有评论，来说两句吧...

相关阅读

相关微信小程序如何设置背景图片

今天第一次来尝试微信小程序，可在了解完基本常识之后。设置背景图片就难到我了。 CSDN上面找了一些办法，大致有以下几种： 1.转换为base64格式或者使用网上图片

心已赠人/ 2023年07月20日 13:39/ 0 赞/ 66 阅读

相关微信小程序设置图片保持原有比例

微信小程序设置图片保持原有比例 .wxml文件 <block wx:for="{ {swiper}}" wx:key="index">

约定不等于承诺〃/ 2023年05月21日 07:23/ 0 赞/ 19 阅读

相关微信小程序设置wxss背景图片

微信小程序设置wxss背景图片目前只支持两种： 1. 在线图片如果有自己的服务器可以将图片放到自己的web服务器上；或者参考这个通过qq相册或百

雨点打透心脏的1/2处/ 2022年11月25日 11:36/ 0 赞/ 403 阅读

相关微信小程序图片抖动

<view class='game_point_me { {isDoudong?"doudong":""}}' bindtap='pointMe'></v

深碍√TFBOYSˉ_/ 2022年11月14日 11:52/ 0 赞/ 249 阅读

相关微信小程序图片分包 || 微信小程序资源分包

静态资源处理在分包根目录建一个static包，把资源放进这个static包 pageA --页面1 --页面2 ......

「爱情、让人受尽委屈。」/ 2022年08月29日 05:54/ 0 赞/ 313 阅读

相关微信小程序图片裁剪

插件下载网站[https://github.com/dlhandsome/we-cropper][https_github.com_dlhandsome_we-cropper]

桃扇骨/ 2022年05月31日 10:36/ 0 赞/ 370 阅读

相关微信小程序 button 的样式设置为图片

方法一：button 与 image 重叠将button设为 opacity:0 然后定位放在那副图片的上边。方法二：background-image bac

墨蓝/ 2022年05月15日 23:46/ 0 赞/ 262 阅读

相关微信开发之小程序分享设置图片标题

在js文件中写入一下代码 / 设置分享的名称和logo / onShareAppMessage() { r

绝地灬酷狼/ 2022年01月31日 02:17/ 0 赞/ 533 阅读

相关微信小程序生成图片

又是一波干货~ .wxml <view class='more' bindtap='saveImageToPhotosAlbum'>保存图片</view>

矫情吗；*/ 2021年09月17日 01:04/ 0 赞/ 585 阅读

相关微信小程序image图片自适应宽度比例显示的方法

一.了解image组件 ![20170505164345853][] 由于image有默认的固定的宽度和高度，这样我们在做图片自适应的时候，就不好做了。下面就来一起解决下

迷南。/ 2021年09月12日 06:34/ 0 赞/ 1098 阅读