CSS aspect-ratio横向溢出未自动缩高问题求助

问题出在未限制容器最大尺寸，且flex容器未正确对齐子元素。要实现保持比例且不溢出父容器的效果，只需调整以下属性：

• 给父flex容器添加对齐属性，让子元素在容器内居中：

  .flex.w-4/5.h-[90vh] {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* 可选，防止极端情况溢出 */
  }
  

• 给puff-container添加最大宽高限制，确保它不会超出父容器边界：

  <div
      id="puff-container"
      style="aspect-ratio: {x}/{y};"
      class="outline outline-offset-2 shadow-2xl max-w-full max-h-full"
  >
      <!-- 内部内容 -->
  </div>
  

原理说明 #

• max-w-full和max-h-full强制子容器的宽高不超过父容器的可用空间；
• 结合aspect-ratio，浏览器会自动计算符合比例的最大尺寸，触达父容器某一边界后停止扩展；
• flex对齐属性让子容器在父容器内居中，避免偏移。

完整代码示例 #

<div class="flex w-4/5 h-[90vh] justify-center items-center">
    <div
        id="puff-container"
        style="aspect-ratio: {x}/{y};"
        class="outline outline-offset-2 shadow-2xl max-w-full max-h-full"
    >
        {#if $puff}
            <P5 sketch={$puff} />
        {:else}
            <div class="bg-orchid w-full h-full" />
        {/if}
    </div>
</div>

如果要让p5.js画布和容器尺寸完全匹配，可以在sketch中动态获取容器尺寸：

function setup() {
  const container = document.getElementById('puff-container');
  createCanvas(container.offsetWidth, container.offsetHeight);
}

// 可选：窗口大小变化时重新调整画布
function windowResized() {
  const container = document.getElementById('puff-container');
  resizeCanvas(container.offsetWidth, container.offsetHeight);
}

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