使用Flexbox创建图片画廊：如何让项目内容拉伸至容器底部？

要让flex item内的图片完全填满容器高度，你可以按以下步骤调整CSS：

• 确保flex子项（图片容器）等高
  给画廊容器设置基础flex属性，让所有子项自动匹配最高项的高度：

  .gallery-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem; /* 可选，设置图片间距 */
  }
  
  .gallery-item {
    flex: 1 0 25%; /* 四列布局，可根据需求调整宽度比例 */
    min-width: 200px; /* 防止窗口过窄时图片挤压变形 */
  }
  

• 让图片容器内部占满子项高度
  给每个.gallery-item设置为flex容器，强制内部内容拉伸填满整个子项高度：

  .gallery-item {
    /* 保留上述flex属性 */
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  

• 控制图片缩放填满容器
  给图片设置宽高100%，并用object-fit保证图片按比例缩放的同时填满容器：

  .gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 按比例缩放，裁剪超出部分，确保完全填满容器 */
    /* 若不想裁剪图片，可改用object-fit: contain，但容器会出现空白区域，按需选择 */
  }
  

调整后，所有图片容器会保持等高，图片也会自动适配容器高度，不会出现底部空隙。

内容的提问来源于stack exchange，提问作者Davron Parpiyev