如何让并排图片保持等高且适配任意屏幕尺寸？

你的问题出在flex布局和float混合使用，且未给列设置自适应宽度占比，导致移动端空间不足时自动换行。下面是直接可行的解决方案：

修改后的CSS代码 #

* {
  box-sizing: border-box;
}

.row {
  display: flex; /* 将父容器设为flex容器，子元素默认并排 */
  flex-wrap: nowrap; /* 强制不换行，确保任意屏幕下都保持并排 */
  gap: 10px; /* 替代列内padding，更便捷控制列间距 */
}

.column {
  flex: 1; /* 让两个列平分父容器宽度，自适应所有屏幕尺寸 */
  height: 40vh; /* 保留你需要的固定高度 */
}

.column img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片比例，裁剪多余部分；若需完整显示用contain */
  display: block; /* 消除图片默认的行内元素间距 */
}

关键调整说明 #

• 把.row设为flex容器：这是核心，flex布局天生支持子元素并排，flex-wrap: nowrap会强制子元素始终在一行，不会因屏幕缩小换行。
• 给.column设置flex: 1：让两个列自动平分父容器宽度，无论屏幕多大，都各占一半空间。
• 图片设置width:100%+height:100%+object-fit：确保图片填满列的高度（实现等高），同时保持原有比例，避免拉伸变形。object-fit: cover会裁剪边缘适配容器，object-fit: contain会完整显示图片但可能留空白，可按需选择。
• 用gap替代列的padding：更简洁地控制列间距，避免padding带来的宽度计算误差。

对应的HTML（无需修改） #

<div class="row">
    <div class="column">
        <img src="thefirstimage" alt="A picture of me."/>
    </div>
    <div class="column">
        <img src="thesecondimage" alt="Another picture of me."/>
    </div>
</div>

修改后，无论电脑还是手机屏幕，两张图片都会保持等高并排，且不会出现变形问题。

内容的提问来源于stack exchange，提问作者Christian G.