如何在不修改内联样式的前提下让响应式图片保持宽高比？

场景1：保持图片自身的固有宽高比 #

直接给全局CSS添加一行规则，强制覆盖内联样式中的硬编码高度：

img {
  max-width: 100%;
  height: auto !important;
}

!important 用来优先覆盖内联样式里的固定height值，页面缩放时，图片宽度会被max-width:100%限制在容器范围内，高度则自动根据图片自身的固有宽高比适配，从而维持比例不变。

场景2：保持内联style中硬编码的宽高比 #

纯CSS无法通用实现该需求——因为CSS无法读取元素内联样式里的width和height数值，无法动态计算预设比例。此时需要结合JavaScript补充实现：
先添加一段全局脚本：

document.querySelectorAll('img').forEach(img => {
  const computedStyle = getComputedStyle(img);
  const width = parseFloat(computedStyle.width);
  const height = parseFloat(computedStyle.height);
  if (width && height) {
    img.style.setProperty('--aspect-ratio', `${width / height}`);
  }
});

再更新全局CSS：

img {
  max-width: 100%;
  height: auto !important;
  aspect-ratio: var(--aspect-ratio);
}

这段JS会遍历所有图片，读取它们的计算宽高值算出预设比例，存入自定义CSS属性中，CSS再通过该属性强制图片保持预设的宽高比，无论页面如何缩放都能维持内联样式定义的比例。

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