做一个可以自适应的页面

Question

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

Answer 1

根据您提供的要求，您可以使用弹性盒子（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端和手机端上实现一个自适应的界面，使图片在不同屏幕大小下合理布局。