搜尋
首頁微信小程式小程式開發微信小程式實作image元件圖片自適應寬度比例實例分享

本文主要介紹了微信小程式實現image元件圖片自適應寬度比例顯示的方法,簡單講述了image元件的常用屬性,並結合實例形式分析了微信小程式實現圖片自適應寬度比例的相關操作技巧,需要的朋友可以參考下,希望能幫助大家。

本文實例講述了微信小程式實作image元件圖片自適應寬度比例顯示的方法。分享給大家供大家參考,具體如下:

一. 了解image元件

##由於image有預設的固定的寬度和高度,這樣我們在做圖片自適應的時候,就不好做了。下面就來一起解決下

二.方法

#(一).使用mode:widthFix

#widthFix:寬度不變,高度自動變化,原圖寬高比不變。

首先我們先設定image的mode為widthFix,然後再為圖片加上一個固定rpx的寬度,例如:730rpx。

這樣圖片也可以自適應了。 。因為小程式的rpx本身就是一個自適應顯示的單位

(二).使用bindload綁定函式動態自適應。

我們可以給image綁定一個函數,這個函數,如上面的bindload說明一樣,我們可以取得到原圖的寬度和高度。

然後計算他們的寬高比率。 。然後設定一個寬度大小(rpx),最後透過style動態設定image的寬高。程式碼如下:

1. 寫頁面結構index.wxml:


<image src="../uploads/2.jpg" bindload="imageLoad"
style="width:{{imgwidth}}rpx; height:{{imgheight }}rpx;"></image>

2. 設定資料index.js


#

//获取应用实例
var app = getApp()
Page({
  data: {
    screenWidth: 0,
    screenHeight:0,
    imgwidth:0,
    imgheight:0,
  },
  onLoad: function() {
    var _this = this;
    wx.getSystemInfo({
      success: function(res) {
        _this.setData({
          screenHeight: res.windowHeight,
          screenWidth: res.windowWidth,
        });
      }
    });
  },
  imageLoad: function(e) {
    var _this=this;
    var $width=e.detail.width,  //获取图片真实宽度
      $height=e.detail.height,
      ratio=$width/$height;  //图片的真实宽高比例
    var viewWidth=500,      //设置图片显示宽度,
      viewHeight=500/ratio;  //计算的高度值
    this.setData({
      imgwidth:viewWidth,
      imgheight:viewHeight
    })
  }
})

相關推薦

詳解CSS百分比padding製作圖片自適應佈局

實例詳解Javascript防止圖片拉伸的自適應處理

怎麼實作圖片大小自適應


以上是微信小程式實作image元件圖片自適應寬度比例實例分享的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
4 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
4 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
4 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.聊天命令以及如何使用它們
4 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中

VSCode Windows 64位元 下載

VSCode Windows 64位元 下載

微軟推出的免費、功能強大的一款IDE編輯器

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

Atom編輯器mac版下載

Atom編輯器mac版下載

最受歡迎的的開源編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用