做一个可以自适应的页面

用这些图片做一个自适应的界面，可用弹性盒子等，要求有web端手机端的

img

img

img

img

img

img

img

根据您提供的要求，您可以使用弹性盒子（Flexbox）来创建一个自适应的界面，使其适用于Web端和手机端。下面是一个简单的示例代码，展示如何使用Flexbox来布局这些图片：

HTML代码：

<div class="container">
  <div class="row">
    <img src="https://img-mid.csdnimg.cn/release/static/image/mid/ask/420303801686192.jpg?x-oss-process=image/auto-orient,1/resize,w_320,m_lfit" alt="img">
    <img src="https://img-mid.csdnimg.cn/release/static/image/mid/ask/065123801686128.jpg?x-oss-process=image/auto-orient,1/resize,w_320,m_lfit" alt="img">
  </div>
  <div class="row">
    <img src="https://img-mid.csdnimg.cn/release/static/image/mid/ask/734523801686155.jpg?x-oss-process=image/auto-orient,1/resize,w_320,m_lfit" alt="img">
    <img src="https://img-mid.csdnimg.cn/release/static/image/mid/ask/674923801686139.jpg?x-oss-process=image/auto-orient,1/resize,w_320,m_lfit" alt="img">
  </div>
  <div class="row">
    <img src="https://img-mid.csdnimg.cn/release/static/image/mid/ask/305533801686142.jpg?x-oss-process=image/auto-orient,1/resize,w_320,m_lfit" alt="img">
    <img src="https://img-mid.csdnimg.cn/release/static/image/mid/ask/576933801686128.jpg?x-oss-process=image/auto-orient,1/resize,w_320,m_lfit" alt="img">
  </div>
  <div class="row">
    <img src="https://img-mid.csdnimg.cn/release/static/image/mid/ask/889343801686196.jpg?x-oss-process=image/auto-orient,1/resize,w_320,m_lfit" alt="img">
  </div>
</div>

CSS代码：

.container {
  display: flex;
  flex-wrap: wrap;
}

.row {
  display: flex;
  flex: 1;
  justify-content: space-between;
  margin-bottom: 10px;
}

img {
  max-width: 100%;
  height: auto;
}

上述代码将图片放置在一个容器内，容器使用Flexbox布局，并设置flex-wrap: wrap;以使其在需要时换行。每一行的图片使用Flexbox的justify-content: space-between;来使图片在行内平均分布。图片的样式设置为max-width: 100%;以确保图片在不超过其原始宽度的情况下适应父容器。

这样，您可以在Web端和手机端上实现一个自适应的界面，使图片在不同屏幕大小下合理布局。

该回答通过自己思路及引用到GPTᴼᴾᴱᴺᴬᴵ搜索,得到内容具体如下：
下面是一个使用弹性盒子实现图片自适应居中的示例代码，适用于 Web 端和手机端。在这个示例中，我们使用了 HTML5 和 CSS3 技术。

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    /* 设置 body 的高度为视口高度 */
    body {
      height: 100vh;
      margin: 0;
      display: flex;
      /* 设置主轴为垂直方向 */
      flex-direction: column;
      /* 设置主轴和交叉轴的对齐方式为居中 */
      justify-content: center;
      align-items: center;
    }

    /* 设置图片容器的最大宽度为视口宽度 */
    .images {
      max-width: 100vw;
      /* 设置容器为弹性盒子，主轴为水平方向 */
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }

    /* 设置每个图片的最大宽度为容器宽度的 1/3 */
    .images img {
      max-width: calc(100% / 3);
      margin: 10px;
    }
  </style>
</head>
<body>
  <div class="images">
    <img src="image1.jpg">
    <img src="image2.jpg">
    <img src="image3.jpg">
    <img src="image4.jpg">
    <img src="image5.jpg">
    <img src="image6.jpg">
    <img src="image7.jpg">
  </div>
</body>
</html>

在上述代码中，我们首先设置了 body 的高度为视口高度，并将其设置为弹性盒子，主轴为垂直方向，交叉轴和主轴的对齐方式为居中。然后，我们设置图片容器 .images 的最大宽度为视口宽度，并将其设置为弹性盒子，主轴为水平方向，每个图片的最大宽度为容器宽度的 1/3。最后，我们在 HTML 中添加了图片元素，并设置它们的 src 属性为相应的图片文件。

这样，无论是在 Web 端还是在手机端，这个页面都会根据视口大小自动调整布局，使得所有图片居中显示，并且每行显示三张图片。您可以将示例代码中的图片文件名替换为您自己的图片文件名，然后在浏览器中打开该 HTML 文件，即可查看效果。

如果以上回答对您有所帮助，点击一下采纳该答案～谢谢

前段时间接触到这个，记过这个基于弹性盒子布局的自适应界面示例，可以应用于多种设备和平台。
发你看看吧，HTML 结构部分:

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>自适应界面示例</title>

      <style type="text/css">
         .container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            margin: 10px;
         }
         .box {
            width: 300px;
            height: 300px;
            margin: 10px;
            background-image: url("image.jpg");
            background-size: cover;
            background-position: center;
            box-shadow: 0px 0px 10px rgba(0,0,0,0.4);
         }
      </style>
   </head>

   <body>
      <div class="container">
         <div class="box"></div>
         <div class="box"></div>
         <div class="box"></div>
         <div class="box"></div>
         <div class="box"></div>
         <div class="box"></div>
      </div>
   </body>

</html>

CSS 样式部分：上述 HTML 结构采用了弹性盒子布局，通过 .container 容器实现将子元素自适应排列，充分利用屏幕空间。
在本示例中，采用的是灰色的 .box 盒子作为图片的占位符，占用了宽度的 25%。在页面加载完成后，通过 JavaScript 代码和 Ajax 技术，将服务器上对应的图片加载进来，用作占位符的灰色盒子的背景图片。
当然，具体的自适应实现方式需要根据您的实际需求和设计，来选择和实现最合适的布局和样式效果。

页面：

  <link rel="stylesheet" href="/style.css">代表引入css文件，请根据实际情况修改
   <img src="image1.jpg">中的image1.jpg为文件路径，可以是绝对路径，也可以是相对路径