flex布局,盒子里面插入图片,图片自适应盒子大小

可以使用flex布局中的`flex-grow`和`flex-shrink`属性以及图片的`max-width`和`max-height`属性来实现图片自适应盒子大小的效果。

具体实现步骤如下：

1. 将盒子设置为`display: flex;`，并设置`flex-direction`属性为`column`或`row`，根据需要设置主轴方向。

2. 在盒子里面插入图片，并设置图片的`max-width: 100%;`和`max-height: 100%;`，以防止图片超出盒子大小。

3. 使用`flex-grow: 1;`将图片的宽度和高度设置为与盒子一样大。

4. 如果需要保持图片的宽高比例不变，可以添加`object-fit: contain;`属性，将图片缩放到适合盒子大小的最大尺寸，同时保持图片的宽高比例不变。

完整的CSS代码示例：

.box {
  display: flex;
  flex-direction: row; /* 或者 column */
  align-items: center; /* 或者 justify-content: center */
  width: 500px;
  height: 300px;
  border: 1px solid #ccc;
}
.box img {
  max-width: 100%;
  max-height: 100%;
  flex-grow: 1;
  object-fit: contain; /* 可选 */
}

以上代码中，`.box`表示盒子的样式，`.box img`表示盒子里面的图片样式。其中，`.box`设置了盒子的宽度和高度为`500px`和`300px`，`.box img`设置了图片的宽度和高度与盒子一样大，并且使用`object-fit: contain;`属性保持图片的宽高比例不变。