집 >위챗 애플릿 >미니 프로그램 개발 >WeChat 애플릿은 이미지 구성 요소 사진의 적응형 너비 비율 표시를 어떻게 실현합니까?

WeChat 애플릿은 이미지 구성 요소 사진의 적응형 너비 비율 표시를 어떻게 실현합니까?

不言원래의: 2018-06-27 14:47:262572검색

이 글에서는 이미지 구성 요소에서 이미지의 적응형 너비 비율 표시를 구현하기 위한 WeChat 애플릿의 방법을 주로 소개하고, 이미지 구성 요소의 공통 속성을 간략하게 설명하고, 적응형 너비 비율을 구현하기 위한 WeChat 애플릿의 관련 운영 기술을 분석합니다. , 필요한 친구들은 참고할 수 있습니다

이 기사에서는 이미지 구성 요소 그림의 적응형 너비 비율 표시를 구현하는 WeChat 애플릿의 예를 설명합니다. 참고용으로 모든 사람과 공유하세요. 세부 사항은 다음과 같습니다.

1. 이미지 구성 요소 이해

이미지는 기본적으로 너비와 높이가 고정되어 있으므로 이를 조정할 때 좋지 않습니다. 이미지해냈어요. 함께 풀어보세요

2. 방법

(1) 사용 모드: widthFix

widthFix: 원본 이미지의 가로 세로 비율은 그대로 유지하면서 너비는 변경되지 않고 높이는 자동으로 변경됩니다.
먼저 이미지 모드를 widthFix로 설정한 다음 고정 rpx 너비를 이미지에 추가합니다(예: 730rpx).

이렇게 하면 사진을 조정할 수도 있습니다. . 미니 프로그램의 rpx 자체가 적응형 디스플레이 장치이기 때문에

(2) 바인드로드 바인딩 기능을 사용하여 동적으로 적응합니다.

위의 바인드로드 설명처럼 이 함수를 사용하면 원본 이미지의 너비와 높이를 얻을 수 있습니다.

그런 다음 종횡비를 계산하세요. . 그런 다음 너비 크기(rpx)를 설정하고 마지막으로 스타일을 통해 이미지의 너비와 높이를 동적으로 설정합니다. 코드는 다음과 같습니다.

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
    })
  }
})

전체 내용을 설정합니다. 도움이 되었습니다. 더 많은 관련 내용을 보려면 PHP 중국어 웹사이트에 주목하세요!

WeChat 애플릿은 이미지 구성 요소 사진의 적응형 너비 비율 표시를 어떻게 실현합니까?

관련 기사