如何使用flex-grow或flex-shrink (行和列)保留图像？

在CSS中，使用flexbox布局时，有时需要保持图像的原始宽高比

首先，我们需要创建一个HTML文件，并在其中添加一个包含图像的<div>元素：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox Image Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <img src="your-image-source.jpg" alt="Your Image">
    </div>
</body>
</html>

然后，在CSS文件（例如styles.css）中，我们可以使用display: flex属性创建一个flex容器，并使用flex-wrap: wrap属性使其中的图像自动换行。为了保持图像的宽高比，我们可以使用object-fit: contain属性。此外，还可以使用flex-grow和flex-shrink属性来控制图像在容器中的放大和缩小。

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
}

img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  flex-grow: 1;
  flex-shrink: 1;
}

在这个示例中，.container元素设置为flex容器，其中的图像可以在需要时自动换行。justify-content: center和align-items: center属性将图像居中显示。object-fit: contain属性保持图像的宽高比。flex-grow和flex-shrink属性设置为1，表示图像可以根据容器的大小进行等比例放大和缩小。

这样，图像就可以在保持宽高比的同时，根据容器的大小自动调整大小。