如何实现object-fit: cover与scale-down的混合图片适配效果？

需求：仅当图片尺寸足够大时用图片铺满容器，即实现object-fit: cover与scale-down的混合适配效果——小图保留原尺寸，大图以cover方式铺满容器，无空白区域。

示例代码 #

HTML #

<html>
  <body>
    <div class="container-1">
      1 - cover
    </div>
    <div class="container-2">
      2 - scale-down
    </div>
    <div class="container-1">
      <img src="http://placekitten.com/80/120"/>
    </div>
    <div class="container-2">
      <img src="http://placekitten.com/80/120"/>
    </div>
    <div class="container-1">
      <img src="http://placekitten.com/320/480"/>
    </div>
    <div class="container-2">
      <img src="http://placekitten.com/320/480"/>
    </div>
  </body>
</html>

CSS #

body {
  display: grid;
  grid-template-columns: 200px 200px;
  grid-template-rows: auto 200px 200px;
  gap: 2px;
}

.container-1 {
  background-color: #dfd;
  display: flex;
}

.container-2 {
  background-color: #ddf;
  display: flex;
}

.container-1 > img {
  object-fit: cover;
  flex: 1 1;
}

.container-2 > img {
  object-fit: scale-down;
  flex: 1 1;
}

现有方案的问题 #

• object-fit: cover（左列容器）：小图片会被强制拉伸变形，保留小图原尺寸才符合需求；
• object-fit: scale-down（右列容器）：按定义最多达到object-fit: contain的效果，即使图片尺寸足够大，也会在容器内留下空白区域。

我们需要的是混合效果：小图保持原尺寸（如右列小图），大图铺满容器（如左列大图）。

期望的适配逻辑 #

内容尺寸按none或**cover**中产生更小实际对象尺寸的方式来设置。

约束条件 #

• 无法修改原有HTML布局，但可以给图片嵌套一层容器；
• 图片URL为动态，非静态。

当前进展 #

若存在纯CSS解决方案，需要重新实现cover的适配逻辑，但目前仅找到部分解决方案，仅适用于图片宽高比始终与容器保持同一相对关系（始终更宽或始终更高）的场景。完整解决方案需要基于图片宽高比的条件判断，而当前CSS无法实现——fit-content无法参与calc()、max()等计算，也无法像JavaScript那样获取图片的原始尺寸。目前的纯CSS尝试仅能覆盖部分场景，无法实现全场景的混合适配。

内容的提问来源于stack exchange，提问作者Killy.MXI