如何在不修改固定尺寸div样式的前提下嵌入父div？

问题核心 #

需要将固定尺寸的绿色div（10cm×4cm，样式不可修改）完全适配红色div的宽度，且当外层黄色div宽度或绿色div尺寸变化时，无需手动调整参数即可自动适配。

解决方案：JavaScript动态计算缩放比例 #

通过JS实时计算父容器与绿色div的宽度比例，自动设置缩放参数，彻底避免硬编码数值的脆弱性。

修改后的代码

<div style="background-color: yellow; border: thin solid black; width: 215px">
  <div class="red-div" style="background-color: red; border: thin solid black; width: 50%">
    <div style="width: 100%;">
      我需要将下方的div放入此div内，请忽略这段文字的样式。

      <!-- 下方div样式不可修改 -->
      <div class="green-div"
        style="
          background-color: green;
          border: thin solid black;
          width: 10cm;
          height: 4cm;
        "
      >
        此div样式固定，后续会转换为该尺寸的图片用于打印，因此不允许修改此div的任何CSS样式。
      </div>
    </div>
  </div>
</div>

<script>
const parentContainer = document.querySelector('.red-div > div');
const greenDiv = document.querySelector('.green-div');

function adjustScale() {
  const parentWidth = parentContainer.offsetWidth;
  const greenWidth = greenDiv.offsetWidth;
  const scaleRatio = parentWidth / greenWidth;
  
  // 以左上角为原点缩放，避免元素偏移
  greenDiv.style.transform = `scale(${scaleRatio})`;
  greenDiv.style.transformOrigin = 'top left';
  
  // 同步调整父容器高度，消除缩放后多余空白
  parentContainer.style.height = `${greenDiv.offsetHeight * scaleRatio}px`;
}

// 初始化适配
adjustScale();
// 监听窗口尺寸变化，实时更新缩放
window.addEventListener('resize', adjustScale);
// 若父容器宽度会被其他逻辑动态修改，可在此添加对应监听触发adjustScale
</script>

方案优势 #

• 完全自适应：无论外层容器宽度调整，还是绿色div的固定尺寸修改，都会自动重新计算缩放比例，无需手动修正参数。
• 无硬编码依赖：所有比例均通过实时尺寸计算得出，彻底解决固定数值导致的布局断裂问题。
• 严格遵循需求：不修改绿色div的任何原始样式，仅通过JS动态添加行内样式实现适配。

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