HTML/CSS中Logo尺寸异常：如何统一最后一个Logo的大小？

这个问题的核心原因是flex容器默认允许子元素收缩（flex-shrink: 1），当最后一行只有单个Logo时，它可能会被不必要地压缩；另外仅设置height:2.5rem; width:auto，虽然能让图片按比例缩放，但如果目标Logo的原始宽高比或像素尺寸特殊，也可能导致显示尺寸不一致。

你可以通过以下两种方式调整CSS，让所有Logo保持一致尺寸：

方法1：禁止Flex收缩，保持比例缩放 #

给图片添加flex-shrink: 0，阻止flex容器压缩它的尺寸，同时保留按高度缩放的逻辑：

.images {
  display: flex;
  justify-content: space-between;
  align-items:center;
  background-color: #eee;
  padding: 1rem;
  flex-wrap: wrap;
}
.images img {
  width: auto;
  height: 2.5rem;
  flex-shrink: 0; /* 添加这一行，禁止收缩 */
  margin: 0.5rem 0; /* 可选：添加上下边距，换行后更美观 */
}

方法2：固定容器尺寸，用object-fit保持比例 #

如果希望所有Logo的显示容器尺寸完全统一（避免不同宽高比导致的宽度差异），可以设置固定的宽高，并用object-fit: contain确保图片按比例填充容器：

.images {
  display: flex;
  justify-content: space-between;
  align-items:center;
  background-color: #eee;
  padding: 1rem;
  flex-wrap: wrap;
  gap: 1rem; /* 可选：用gap替代margin，更简洁的间距控制 */
}
.images img {
  width: 7rem; /* 自定义合适的宽度 */
  height: 2.5rem;
  object-fit: contain; /* 保持图片比例，不拉伸变形 */
  flex-shrink: 0;
}

两种方法都能解决你遇到的最后一个Logo缩小的问题，你可以根据实际需求选择：方法1保留图片的原始比例差异，仅统一高度；方法2让所有Logo的显示区域完全一致，视觉上更整齐。

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