React图片容器div裁剪溢出问题修复及0-2张图片适配求助

• 你定义的.img CSS规则没有绑定到JSX的<img>标签上，width: 50%完全没有生效
• Flex容器子元素默认开启收缩，且未配置图片内容适配规则，图片比例和容器不匹配时就会出现裁剪、拉伸问题
• 父容器height: 100%依赖上层元素的明确高度定义，如果上层没有设置固定高度，会导致高度计算异常，进一步触发裁剪

JSX 部分 #

给所有img标签加上类名绑定，顺便简化条件判断逻辑：

<div className={styles.orgImages}>
  {/* 无org.image时默认显示占位图 */}
  {!org.image ? (
    <img 
      className={styles.orgImg}
      src="https://1mktxg24rspz19foqjixu9rl-wpengine.netdna-ssl.com/wp-content/uploads/2020/01/eia-berkeley-Cover.png"
      alt="Organization"
    />
  ) : (
    <>
      <img 
        className={styles.orgImg}
        src={org.image}
        alt="Organization"
      />
      {org.image2 && (
        <img 
          className={styles.orgImg}
          src={org.image2}
          alt="Organization"
        />
      )}
    </>
  )}
</div>

CSS 部分 #

适配1/2张图的展示规则，避免裁剪：

.orgImages {
  display: flex;
  justify-content: center;
  align-items: center; /* 垂直居中对齐，避免高低不一错位 */
  gap: 12px; /* 两张图时的间距，可自行调整 */
  width: 100%;
  /* 固定高度或者用min-height，避免依赖上层100%高度的不确定性 */
  min-height: 200px; 
  /* 如果确实需要继承上层高度，添加overflow: hidden避免内容溢出 */
  /* overflow: hidden; */
}
.orgImg {
  flex: 1 1 0; /* 两张图时平分宽度 */
  max-width: 100%;
  max-height: 100%;
  object-fit: contain; /* 保证图片完整显示，保持比例不裁剪 */
}
/* 单张图时不用平分宽度，保持原始比例自适应 */
.orgImg:only-child {
  flex: 0 1 auto;
  max-width: 100%;
}

• 0张图：容器按你配置的min-height展示空白，或者自行添加空状态占位即可
• 1张图：触发:only-child规则，图片保持原始比例居中显示，不会被强制拉伸到50%宽度
• 2张图：两张图片平分容器宽度，各自保持原始比例完整展示，不会出现裁剪、拉伸问题

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