图片响应式布局问题：百分比宽度导致绝对定位位置偏移

这个问题的核心在于绝对定位元素的宽度计算逻辑和百分比宽度的依赖关系：

当你给<img>设置固定宽度（比如400px）时，父级<div id="logo">作为绝对定位元素，会自动“收缩包裹”子元素的宽度——也就是div的宽度等于img的400px。此时right:50px会让div的右边缘距离视口（或最近的定位父元素）右边缘50px，整个元素自然显示在右侧。

但当你把img的宽高改成23%后，就出现了循环依赖：

• img的百分比宽度是相对于父元素div的宽度计算的
• 而div没有设置明确宽度，默认要靠子元素img撑开宽度

浏览器为了处理这种矛盾，会把div的宽度强制解析为包含块的宽度（也就是视口的宽度，因为你的div没有父级定位元素）。这时候：

• div的宽度等于视口宽度
• img的宽度是div宽度的23%（也就是视口的23%）
• 再加上right:50px的设置，div的右边缘会被定位到视口右边缘往左50px的位置，而div本身宽度是视口宽度，这就导致div的左边缘直接跑到了视口外（视口宽度 - 50px - 视口宽度 = -50px），看起来图片就跑到左侧去了。

下面是几种可行的修复方案，你可以根据需求选择：

方案1：给父div设置明确宽度，让img继承宽度 #

直接给div设置width:23%，然后让img的宽度设为100%，这样就能保证div的宽度是视口的23%，同时img完全填充div，定位逻辑也能正常工作：

<div id="logo" style="position: absolute; right: 50px; top:0px; width:23%;">
  <img src="./images/logo1.png" width="100%" height="auto" border="0" alt="Logo" />
</div>

注意这里把img的height改成auto，可以保持图片的原始比例，避免变形。

方案2：使用视口单位（vw）替代百分比 #

如果你不想给div设置宽度，可以直接用vw单位（1vw = 视口宽度的1%）来定义img的宽度，这样img的宽度直接基于视口，不会和div的宽度产生依赖：

<div id="logo" style="position: absolute; right: 50px; top:0px;">
  <img src="./images/logo1.png" width="23vw" height="auto" border="0" alt="Logo" />
</div>

这种方式更直接，也能保证图片的响应式效果。

方案3：让div收缩包裹img，同时明确img的基准宽度 #

通过给div设置width: max-content，强制div收缩包裹img的宽度，同时给img设置基于视口的百分比宽度：

<div id="logo" style="position: absolute; right: 50px; top:0px; width: max-content;">
  <img src="./images/logo1.png" style="width:23vw; height:auto;" border="0" alt="Logo" />
</div>

这个方案适合需要严格控制div宽度仅包裹图片的场景。

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