微信小程序开发入门（二）image标签及图片样式

本文主要是介绍微信小程序开发入门（二）image标签及图片样式，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

一、image标签显示一张图片

1、首先创建一个images文件夹，子文件夹avatar中下载数上图片，导入到项目跟目录下
2、在.wxml文件中，加上图片骨架标签
src属性可以设置图片路径

图片就显示到了屏幕上
3、绝对路径与相对路径
/开始代表项目根目录 /images/avatar/1.png
相对路径是从该文件夹向上到项目根目录，然后导航到该文件 …/…/images/avatar/1.png
4、文本标签 hello，11月
5、按钮标签

二、小程序rpx响应式单位的特点

1、我们发现图片图片变形了，没有显示出正常尺寸，因为image组件默认宽度是320px,高度240px
2、查看图片的实际尺寸，直接选中图片，右下角可以看到图片尺寸

这里在iPhone6模拟器下，设置属性style=“width:360px;highth:360px”，就显示出了实际尺寸
（iPhone6模拟器下，实际尺寸和原始尺寸的关系是2倍关系，像素值/2，即是实际尺寸在iPhone6模拟器下1px = 2rpx）

这里引入rpx，rpx是一个根据实际屏幕大小自适应的单位，通常显示照片就用rpx，保证它在iPad或者iPhone上展示的图片比例都是合适的
最终我们设置属性style=“width:200rpx;highth:200rpx”

三、分离css样式到wxss文件

属性style="width:200rpx;highth:200rpx"是一个样式，不推荐写到标签里面去，我们需要把样式放到wxss文件中去
到wxss文件写一个样式类
.user-avatar{
}
.代表是一个样式类，类名推荐用连字符-，我们简单起见命名为avatar
.avatar{
width: 200rpx;
height: 200rpx;
}
于是可以把image标签中的style=“width:200rpx;highth:200rpx” 删除
但要在image标签加上引用

样式中再设置一个图片距离顶部高度 margin-top: 160rpx;

最终
.avatar{
width: 200rpx;
height: 200rpx;
margin-top: 160rpx;
}

这篇关于微信小程序开发入门（二）image标签及图片样式的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！