小白学习小程序 | 图片显示及调整(4)

[复制链接]
241|1
手机看帖
扫描二维码
随时随地手机跟帖
单片小菜|  楼主 | 2022-4-24 10:04 | 显示全部楼层 |阅读模式
646516264aeb305376.png
引:

      上次学习了文字的显示及调整,这次开始学习图片的显示及调整。三个部分组成,图片的直接显示、图片的布局调整、图片的尺寸调整。

287876264aececf3f1.png

一、前期的准备工作

      先找到一张自己喜欢的图片,打开上篇**的项目文件。

974806264aee5862c6.png

在pages右键鼠标,新建image的文件夹。

932536264aefa7189e.png

64466264af069b604.png

      打开资源管理器之后,将我们准备好的图片复制粘贴到该文件夹中。

553506264af171747d.png

      返回到项目文件中。会发现image文件夹下多了一个1.jpg文件

101236264af2733c62.png

二、直接显示图片

      用到的命令如下

477626264af398042b.png

      实际操作一下,在123.wxml文件中增加上面的指令:

519556264af4ba5a27.png

      编译后预览一下:

500686264af5b93751.png

会发现头悬梁的图片显示出来了。

三、图片的布局调整

      我们需要使用到view,并在123.wxss文件中建立选择器

28886264af6cf0449.png

display设置为flex,居中显示,在123.wxml中进行view设置,使用刚刚的选择器。class="imagesize"

959226264af7c5ee64.png

      编译运行预览

47536264af8fd805f.png

四、图片尺寸调整

      需要使用到width和height,在123.wxss文件中新建选择器,其中200rpx也可以使用百分比的形式进行设置。

381186264afa09fdd3.png

331696264afa9beec2.png

      在123.wxml文件中进行选择器的使用

562756264afbc29141.png

      运行效果如下:

593536264afd04e4dc.png

结:

      图片直接显示:

229756264afe4e53fe.png

      布局调整

901876264affba7dfa.png

      图片尺寸调整

118656264b00c30dfc.png

144346264b012c6b6f.png

使用特权

评论回复

相关帖子

ap0405209| | 2022-5-16 21:39 | 显示全部楼层
本帖最后由 ap0405209 于 2022-5-16 21:40 编辑

好好学习

使用特权

评论回复
发新帖 我要提问
您需要登录后才可以回帖 登录 | 注册

本版积分规则