在不可靠 aspect-ratio环境下，用 CSS 变量 + JS 保证图片稳定显示

一、问题背景

某个页面中有一张主图，结构大致如下：

<template>
  <div class="custom-container" :style="containerStyle">
    <div class="custom-frame">
      <CustomImage
        :src="https://blog.csdn.net/imageUrl"
        class="custom-image"
        :fit="`inherit`"
        loading-icon=""
        error-icon=""
      />
    </div>
  </div>
</template>

样式上原本主要依赖：

• aspect-ratio 控制图片比例（例如 10:18）
• 图片组件内部的 overflow: hidden 做裁剪

在大部分设备上表现正常，但在部分机型 / WebView 上会出现：

• 主图偶尔完全不显示
• 只在某些系统版本或设备上复现，定位困难

二、问题分析

综合调试结果，有几个关键点：

• 外层 .custom-frame 和内部