一个容器内有三个图片，给容器display: flex; align-items: center; justify-content: space-between;样式，在改变容器大小的时候其中三张图片跟着改变大小但是比例不变

要实现容器内的三张图片随着容器大小的改变而改变大小但比例不变，可以使用CSS中的max-width和max-height属性来设置图片的最大宽度和最大高度，并将图片的宽度和高度都设置为100%。

同时，在容器上设置display: flex; align-items: center; justify-content: space-between;样式，可以让三张图片在容器内水平分布，且垂直居中对齐。

下面是一个示例代码：

<div class="container">
  <img src="image1.jpg" alt="">
  <img src="image2.jpg" alt="">
  <img src="image3.jpg" alt="">
</div>

.container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 500px; /* 容器高度 */
}

.container img {
  max-width: 100%; /* 图片最大宽度 */
  max-height: 100%; /* 图片最大高度 */
  width: 100%; /* 图片宽度 */
  height: 100%; /* 图片高度 */
}

这样，当容器大小改变时，三张图片会按比例缩放，并始终填充整个容器。

相关问题

.container { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; box-sizing: border-box; }

这段代码是用于设置一个容器的样式，其中包含了以下属性：

- height: 100%：将容器的高度设置为父元素的100%。
- display: flex：将容器设置为弹性布局。
- flex-direction: column：将容器的主轴方向设置为垂直方向。
- align-items: center：将容器内部的项目在交叉轴上居中对齐。
- justify-content: space-between：将容器内部的项目沿主轴方向均匀分布，空白部分平均分配在项目之间。
- box-sizing: border-box：使用border-box模型，盒子的宽度和高度包括内容、内边距和边框。

通过这些样式设置，可以实现一个垂直居中且在容器内部的项目均匀分布的效果。

padding: 10px 5px; display: flex; justify-content: space-between; align-items: center; box-sizing: border-box;

这是一组 CSS 样式代码，用于设置一个元素的内边距、弹性布局、对齐方式和盒模型。具体解释如下：

- `padding: 10px 5px;`：设置元素内边距为上下 10 像素，左右 5 像素。
- `display: flex;`：将元素设置为弹性布局。
- `justify-content: space-between;`：将子元素在主轴上分布对齐，使它们之间的间隔相等，且第一个和最后一个元素与容器边缘之间的间隔为最大值。
- `align-items: center;`：将子元素在交叉轴上居中对齐。
- `box-sizing: border-box;`：设置盒模型为 border-box，即将元素的内边距和边框计入宽度和高度的值中。