WeChat 애플릿의 이미지 처리(가운데, 전체 화면)-위챗 개발-php.cn

WeChat 애플릿의 이미지 처리(가운데, 전체 화면)

hzc

풀어 주다： 2020-06-09 16:53:38

앞으로

10634명이 탐색했습니다.

미니 프로그램 디자인에서 그림 디스플레이는 꼭 필요한 단계입니다. 온라인 교육이 제한적이라는 것을 알고 이제 자체 디자인 과정에서 발생한 문제를 정리하여 여러분이 직면하는 문제를 해결할 수 있을 것입니다.

끝부분에 제공된 전체 코드를 사용하고 내 단계에 따라 디버깅하세요. 그렇지 않은 경우 저에게 연락하세요.

먼저 사용된 코드와 렌더링을 제공합니다:

먼저 home.wxml 프로그램을 제공합니다:

<view class=&#39;imagesize&#39;>
  <image src="/images/2.png" class=&#39;in-image&#39;   >
  </image>
</view>

로그인 후 복사

1. 그림 중앙(화면 상단):

//.wxss里的参数
.imagesize{
 display:flex;                    //flex布局
 justify-content: center;         //水平轴线居中
}
.imagesize image { 
  width:400rpx;
  height:400rpx;
}

로그인 후 복사

WeChat 애플릿의 이미지 처리(가운데, 전체 화면)

위에서 설정한 그림 크기는 다음과 같습니다. 실제 효과를 확인하는 것이 편리하기 때문입니다.

2. 사진은 중앙에 위치합니다(가운데, 위치 조정 가능 → 높이 및 항목 정렬)

.imagesize{
 display:flex;
 height: 600px;                    //flex布局高度
 justify-content: center;        
 align-items:center;                //垂直居中
 
}
.imagesize image { 
  width:400rpx;
  height:400rpx;
}

로그인 후 복사

WeChat 애플릿의 이미지 처리(가운데, 전체 화면)

위 사진의 높이 값은 200px 400px 600px

해당되지 않습니다 휴대폰의 모든 모델에 적용되는 휴대폰의 화면 크기는 고정되어 있지 않습니다.

하지만 사진 위치를 디자인하는데 많은 도움이 됩니다.

3. 그림을 중앙에 배치합니다(화면 중앙)

코드:

page{
   height:100%                        //满屏设置
}
.imagesize{
 display:flex;
 height: 100%;                        //设置布局满屏
 justify-content: center;
 align-items:center;
 
}
.imagesize image { 
  width:400rpx;
  height:400rpx;
}

로그인 후 복사

효과 보기:

WeChat 애플릿의 이미지 처리(가운데, 전체 화면)

4. 전체 코드를 제공합니다(이전 기사에도 전체 코드가 있습니다. 그냥 이전 폴더로 가세요):

home.wxml

<view class=&#39;imagesize&#39;>
  <image src="/images/2.png" class=&#39;in-image&#39;   >
  </image>
</view>

로그인 후 복사

home.wxss

page{
   height:100%
}
.imagesize{
 display:flex;
 height: 100%;
 justify-content: center;
 align-items:center;
 
}
.imagesize image { 
  width:400rpx;
  height:400rpx;
}

로그인 후 복사

5. 화면 채우기:

화면만 채우려면 주로 mode='를 사용하세요. widthFix'

추가된 특정 프로그램 세그먼트는 .wxml:

<image src="/images/img21.jpg" class=&#39;in-image&#39; mode=&#39;widthFix&#39;> </image>

로그인 후 복사

이고 .wxss에 대한 변경 사항:

page{
height:100%
}
.imagesize{
display:flex;
height: 100%;
justify-content: center;
align-items:center;
}

로그인 후 복사

데모용 그림 변경:

2018071814353890WeChat 애플릿의 이미지 처리(가운데, 전체 화면)

widthFix가 없는 렌더링을 살펴보세요.

WeChat 애플릿의 이미지 처리(가운데, 전체 화면)

그래서 여전히 매우 유용합니다.

하단탭창이라 전체화면 커버리지 사진은 나오지 않습니다.

시작 화면을 디자인할 수 있습니다. 물론 적절한 비율로 사진을 찍는 것이 실제 디스플레이 효과에 영향을 미칩니다. 또한, 배경색과 그림 색상의 차이는 디버깅 시 주의가 필요합니다.

추천 튜토리얼: "WeChat 미니 프로그램"

위 내용은 WeChat 애플릿의 이미지 처리(가운데, 전체 화면)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!