在微信小程序中，图片的自适应是一个常见的需求。特别是当我们需要展示多张图片时，往往需要将它们按照某种规则排列，并且当屏幕尺寸发生变化时，图片的大小也需要跟着变化。本文将介绍如何通过微信小程序来实现这个功能。
1. 布局
首先，我们需要将多张图片按照某种规则排列。这可以通过使用 flex 布局来实现。我们可以将所有图片放置在一个父容器中，并且将其样式设置为 display: flex; flex-wrap: wrap;。这样就可以让图片自动换行，并且填满整个容器。下面是一个简单的示例代码：
-- -------------------- ---- ------- ----- ------------------------ ------ ------------- -------------------------- ------ ------------- -------------------------- ------ ------------- -------------------------- ------ ------------- -------------------------- ------ ------------- -------------------------- ------- ------- ---------------- - -------- ----- ---------- ----- - ------ - ------ -------- ------- ----- - --------
上述代码定义了一个包含五张图片的父容器，每张图片占据父容器的三分之一。这样，在较大的屏幕上将会显示五列图片，并且在较小的屏幕上将会自动调整为两列或一列。
2. 图片自适应
接下来，我们需要让图片自适应。也就是说，当屏幕尺寸发生变化时，图片的大小也需要跟着变化。这可以通过设置图片的 width 属性为 100% 来实现。下面是修改后的代码：
-- -------------------- ---- -------
----- ------------------------
------ ------------- --------------------------
------ ------------- --------------------------
------ ------------- --------------------------
------ ------------- --------------------------
------ ------------- --------------------------
-------
-------
---------------- -
-------- -----
---------- -----
-
------ -
------ --------
------- -----
-
------ ------ --- ----------- ------ -
------ -
------ ----
-
-
------ ------ --- ----------- ------ -
------ -
------ -----
-
-
--------上述代码定义了三个媒体查询，用于在不同的屏幕尺寸下调整图片的大小。当屏幕宽度小于等于 768 像素时，每张图片占据父容器的一半。当屏幕宽度小于等于 480 像素时，每张图片占据整个父容器。
3. 示例代码
最后，这里是完整的示例代码：
-- -------------------- ---- -------
----- ------------------------
------ ------------- --------------------------
------ ------------- --------------------------
------ ------------- --------------------------
------ ------------- --------------------------
------ ------------- --------------------------
-------
-------
---------------- -
-------- -----
---------- -----
-
------ -
------ --------
------- -----
-
------ ------ --- ----------- ------ -
------ -
------ ----
-
-
------ ------ ---
- --------------------------------------------------------- --------
------------------------------------------------------------------------------