如何用CSS缩放已知尺寸子元素以适配未知宽度父容器？

可以通过CSS容器查询实现需求，无需JavaScript，也不用修改子元素的width属性。核心思路是利用容器查询的cqw单位（容器内联宽度的1%），计算子元素的精准缩放比例。

修改后的代码： #

CSS部分

/* 定义父容器为容器查询上下文 */
.a-small-parent {
  container-type: inline-size; /* 开启基于内联宽度的容器查询 */
}

.a-very-wide-child {
  /* 子元素原始尺寸 */
  width: 3000px;
  height: 500px;

  /* 计算缩放比例：父容器宽度 / 子元素原始宽度 */
  transform: scale(calc(100cqw / 3000));
  transform-origin: top left; /* 以左上角为缩放原点，避免偏移 */
}

/* 以下为原有样式，无需修改 */
.a-small-parent {
  border: 5px solid teal;
}

.a-very-wide-child {
  background-image: linear-gradient(45deg, #888, transparent);
  border: 5px solid gold;
}

.container{
  width: 40vw;
}

HTML部分

<div class="container">
  <div class="a-small-parent">
    <pre class="a-very-wide-child">
      <img src="https://picsum.photos/400/500" alt="">
    </pre>
  </div>
</div>

原理说明 #

• container-type: inline-size：将.a-small-parent标记为容器查询的上下文，让子元素能基于它的宽度计算样式。
• 100cqw：代表父容器的完整内联宽度，即父容器实际渲染的宽度。
• calc(100cqw / 3000)：用父容器宽度除以子元素原始宽度3000px，得到刚好让子元素适配父容器的缩放比例。
• transform-origin: top left：固定缩放原点为左上角，防止子元素缩放后出现位置偏移。

兼容性说明 #

容器查询已被现代主流浏览器支持（Chrome 105+、Firefox 110+、Safari 16+），如果需要兼容旧版浏览器，可通过CSS变量配合少量JS获取父容器宽度，但这会违背你尽量避免JS的需求，因此优先推荐容器查询方案。

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