如何在@container中利用父元素aspect-ratio实现无裁剪图片适配？

问题说明 #

根据MDN文档，aspect-ratio应该可用于@container规则，但我无法复现该效果。我的需求是让图片完全填满宽高比动态变化的元素，且明确不想使用object-fit: cover;——因为这会裁剪图片，导致初始不可见的区域后续无法通过平移、缩放等操作显示，因此父元素必须设置overflow: hidden。也欢迎其他解决方案，谢谢！

当前代码示例 #

CSS代码 #

div {
  overflow: hidden;
  container-type: inline-size;
  container-name: wrapper;
  margin-bottom: 1em;
  background: lightcoral;
}

.landscape {
  aspect-ratio: 16/9;
  width: 200px;
}

.portrait {
  aspect-ratio: 9/16;
  height: 200px;
}

img {
  width: 100%;
  height: auto;
}

@container wrapper (aspect-ratio < 1) {
  img {
    width: auto;
    height: 100%;
  }
}

HTML代码 #

<div class="landscape">
  <img src="https://images.unsplash.com/photo-1722932319520-fdd0c213bf2c?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</div>
<div class="portrait">
  <img src="https://images.unsplash.com/photo-1722932319520-fdd0c213bf2c?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</div>

示意图 #

解决方案 #

1. 修复容器查询不生效的问题 #

你当前的@container规则无法识别aspect-ratio条件，是因为设置的container-type: inline-size仅允许基于容器的内联轴宽度进行查询，无法获取容器的完整宽高比信息。要查询容器的aspect-ratio，需要将container-type改为size：

修改后的CSS代码：

div {
  overflow: hidden;
  container-type: size; /* 替换inline-size为size */
  container-name: wrapper;
  margin-bottom: 1em;
  background: lightcoral;
}

.landscape {
  aspect-ratio: 16/9;
  width: 200px;
}

.portrait {
  aspect-ratio: 9/16;
  height: 200px;
}

img {
  width: 100%;
  height: auto;
}

@container wrapper (aspect-ratio < 1) {
  img {
    width: auto;
    height: 100%;
  }
}

这样容器查询就能正确识别竖屏（宽高比<1）的容器，并切换图片的适配方式，让图片完全填满容器且不被裁剪，后续可以通过JS实现平移、缩放操作。

2. 替代方案：使用Grid布局适配 #

如果不想依赖容器查询，也可以用Grid布局让图片自动填满容器，同时保持自身比例不裁剪：

div {
  overflow: hidden;
  display: grid; /* 添加Grid布局 */
  place-items: start; /* 图片从左上角开始，方便后续平移 */
  margin-bottom: 1em;
  background: lightcoral;
}

.landscape {
  aspect-ratio: 16/9;
  width: 200px;
}

.portrait {
  aspect-ratio: 9/16;
  height: 200px;
}

img {
  grid-area: 1/1; /* 图片占满Grid容器 */
  min-width: 100%;
  min-height: 100%;
}

这个方案不需要容器查询，图片会自动根据容器的宽高比选择铺满宽度或高度，超出部分隐藏，后续依然可以通过JS控制图片的位置实现平移、缩放。

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