如何让.row_1中三张图片总宽匹配容器且等高（非硬编码）

直接调整CSS即可实现需求，无需硬编码宽高，核心利用Flexbox的弹性分配特性和object-fit保持图片比例：

修改后的CSS代码 #

.Gallery .row_1 {
  display: flex;
  width: 100%;
  gap: 0; /* 移除图片间默认间距，确保总宽度完全匹配容器 */
}

.Gallery .row_1 img {
  display: block;
  flex: 1; /* 让三张图片平分容器宽度，总宽度刚好填满.row_1 */
  height: 100%; /* 强制图片高度与容器一致，自动统一所有图片高度 */
  object-fit: cover; /* 保持图片比例，填充整个图片容器（可根据需求换为contain） */
  max-width: 100%; /* 防止图片超出容器 */
}

关键属性说明 #

• flex: 1：每张图片会自动分配.row_1的可用宽度，三张图片总宽度刚好等于容器宽度，完全适配。
• height: 100%：结合Flex容器默认的align-items: stretch，所有图片会被拉伸至与容器高度一致，容器高度由比例缩放后最高的图片决定，实现自动统一高度。
• object-fit: cover：保持图片原始比例，同时填充整个图片区域；如果需要完整显示图片不裁剪，替换为object-fit: contain即可，此时图片两侧可能出现留白，但高度依然统一、总宽度适配容器。

最终JSX保持不变 #

<div className='Gallery'>
    <div className='row_1'>
        <img src='/gallery_img_1.png' />
        <img src='/gallery_img_2.png' />
        <img src='/gallery_img_3.png' />
    </div>
</div>

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