如何用Flexbox和CSS统一不同高度图片尺寸且避免溢出【已解决】

针对你遇到的图片高度不一致、文本容器溢出、图片与文本间空白等问题，可通过以下CSS调整解决：

核心修改点 #

• 统一图片容器高度，确保图片按比例缩放且不溢出
• 修正flex布局，让产品卡片高度一致
• 消除图片行内元素空白
• 防止文本容器边框溢出

具体代码调整 #

/* 父容器：确保换行不溢出，设置间距 */
.products {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 产品卡片：垂直flex布局，统一高度 */
.product {
  display: flex;
  flex-direction: column;
  width: calc(25% - 0.75rem); /* 四列布局，适配gap */
  height: 100%;
}

/* 图片容器：固定高度，隐藏溢出 */
.product-img {
  height: 220px; /* 可根据需求调整高度 */
  overflow: hidden;
}

/* 图片：按比例缩放，消除底部空白 */
.product-img img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持比例，裁剪多余部分 */
  display: block; /* 去掉行内元素带来的底部空白 */
}

/* 文本容器：占满剩余空间，边框不溢出 */
.product-text {
  flex-grow: 1;
  box-sizing: border-box; /* 边框包含在宽度内 */
  border: 1px solid #ddd;
  padding: 1rem;
  margin-top: 0.5rem;
}

各修改的作用说明 #

1. object-fit: cover：让图片按原始比例缩放，填满容器，多余部分自动裁剪，彻底解决"Neuro Tech"这类高图的高度不一致问题，同时避免图片拉伸变形。
2. display: block：图片默认是行内元素，会保留基线对齐的空白，设置为块级元素可直接消除图片与文本间的多余空白。
3. box-sizing: border-box：让文本容器的边框、内边距都包含在设定的宽度内，网页拉宽时不会出现边框超出父容器的溢出问题。
4. 垂直flex布局：给.product设置flex-direction: column和height: 100%，让每个产品卡片的高度统一，图片容器和文本容器按垂直方向分配空间，解决布局错位问题。
5. flex-wrap: wrap：确保屏幕宽度不足时，产品卡片自动换行，避免横向溢出父容器。

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