动态设置图片宽度仅通过变量生效的异常原因咨询

我需要在浏览器中按比例展示图片，根据图片实际尺寸缩放，所有图片扫描分辨率一致以保证显示比例统一。

以下是正常生效的尺寸设置函数：

let imageSize = (image)=>{
    let multiplier = screen.width > 1200 ? 0.35 : 0.15;
    let width = `${image.clientWidth * multiplier}px`;
    image.style.height = `${image.clientHeight * multiplier}px`;
    image.style.width = width;
}

但如果像设置height一样直接设置width，函数就无法正常工作：

let imageSize = (image)=>{
    let multiplier = screen.width > 1200 ? 0.35 : 0.15;
    image.style.height = `${image.clientHeight * multiplier}px`;
    image.style.width = `${image.clientWidth * multiplier}px`;
}

此时图片宽度会变得极小且失真，该问题在Firefox和Chrome中均存在，仅width设置异常，height设置正常。示例代码及日志如下：

let imageSize = (image)=>{
    let multiplier = screen.width > 1200 ? 0.35 : 0.15;
    console.log(image.clientWidth * multiplier); // 475.65
    image.style.height = `${image.clientHeight * multiplier}px`;
    image.style.width = `${image.clientWidth * multiplier}px`;
    console.log(image.style.width); // "166.6px"
}

核心问题出在浏览器对图片宽高比的实时维护机制：

1. 当你先设置image.style.height时，浏览器会立刻按照图片的原始宽高比，自动调整图片的实际显示宽度——也就是说，设置完height的瞬间，图片的clientWidth已经从原始宽度变成了缩小后的对应宽度（和设置的height比例一致）。
2. 这时候再读取image.clientWidth并乘以 multiplier，得到的是“已经缩小过一次的宽度再缩小一次”的数值，最终设置的width自然会极小，完全不符合预期。

而正常工作的代码中，是提前把原始宽度的缩放值计算好并存在变量里，之后再设置height和width。即便设置height后clientWidth会变化，但width用的是之前计算好的原始宽度缩放值，所以能保持正确的比例。

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