如何实现图片仅水平裁剪且不超宽高比放大的CSS布局？

现有代码 #

CSS 样式 #

.container {
  display: flex;
  width: 100vw;
}

.container > div {
  min-width: 20rem;
}

.container > img {
  object-fit: cover;
  height: 100vh;
  width: 100%;
}

HTML 结构 #

<div class="container">
  <img src="https://static.vecteezy.com/system/resources/previews/021/615/987/original/tv-signal-test-screen-retro-television-color-test-vector.jpg">
  <div>
    Hi mom!
  </div>
</div>

当前问题与期望效果 #

当前布局表现：

• 窗口缩小时，图片仅水平裁剪，保持完整高度；
• 窗口放大时，图片宽度持续增加，为维持宽高比会裁剪上下部分。

期望效果：图片达到「100vh高度对应的自身宽高比宽度」后停止放大，避免上下裁剪。

尝试过的方法及问题 #

• 将img的width:100%改为max-width:100%后，窗口小于图片自身尺寸时图片溢出，不符合预期；
• 尝试使用min(100%,auto)，但min函数不支持auto参数；
• 已通过width: min(100%, calc(100vh*{factor}))实现需求，但不够优雅，寻求更优方案，同时疑惑max-width为何会导致溢出。

一、为什么max-width:100%会导致溢出？ #

核心原因是flex布局中max-width的参考对象和图片尺寸计算逻辑：

• max-width:100%的「100%」参考的是父容器.container的整体宽度（100vw），而非容器留给图片的剩余空间（100vw - 20rem）；
• 图片设置了固定height:100vh，会优先按自身固有宽高比计算宽度，如果该宽度大于剩余空间但小于100vw，max-width:100%不会限制它，再加上flex默认不会强行压缩项目到剩余空间内，最终导致图片溢出。

二、更优雅的实现方案 #

方案1：利用aspect-ratio（现代浏览器兼容） #

无需手动计算比例因子，直接通过aspect-ratio定义图片宽高比，配合width:auto和max-width:100%实现需求：

.container {
  display: flex;
  width: 100vw;
}

.container > div {
  min-width: 20rem;
}

.container > img {
  object-fit: cover;
  height: 100vh;
  /* 替换为你图片的实际宽高比，比如4/3、16/9 */
  aspect-ratio: 4/3;
  width: auto;
  max-width: 100%;
  flex-shrink: 1;
}

效果说明：

• 窗口足够大时：图片宽度根据100vh和设定的比例自动计算，达到对应宽度后停止放大，完整显示无上下裁剪；
• 窗口缩小时：图片被max-width:100%限制在剩余空间内，object-fit:cover裁剪左右部分，保持高度为100vh不变。

方案2：兼容旧浏览器的简洁写法 #

如果需要兼容不支持aspect-ratio的旧浏览器，用min()函数结合图片实际比例，比calc更简洁：

.container > img {
  object-fit: cover;
  height: 100vh;
  /* 4/3≈1.333，替换为你的图片宽高比 */
  width: min(100%, 100vh * 1.333);
  flex-shrink: 1;
}

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