绝对定位图片未遵循左右边距设置？求适配相对容器的解决方法

针对你遇到的图片溢出容器的问题，这里提供几种直接可行的实现方案：

方案一：通过计算宽度限制图片范围 #

利用calc()计算图片可用宽度，同时保留图片宽高比：

<div style="position: relative; height: 100px; width: 200px; overflow: hidden;">
  <img src="x" style="position: absolute; top: 20px; left: 20px; right: 20px; width: auto; max-width: calc(100% - 40px);">
</div>

calc(100% - 40px)是容器宽度减去左右各20px的边距，width: auto确保图片不会被强制拉伸，保持原始比例。

方案二：结合inset与object-fit优化显示 #

用inset简化定位属性，再通过object-fit保证图片完整显示：

<div style="position: relative; height: 100px; width: 200px; overflow: hidden;">
  <img src="x" style="position: absolute; inset: 20px 20px auto; width: calc(100% - 40px); object-fit: contain;">
</div>

inset: 20px 20px auto等价于top:20px; right:20px; left:20px，object-fit: contain会让图片在不超出容器的前提下完整展示，避免变形。

方案三：改用Flex布局（无需绝对定位） #

如果允许调整容器布局方式，Flex实现更直观：

<div style="height: 100px; width: 200px; display: flex; padding: 20px 20px 0; box-sizing: border-box; overflow: hidden;">
  <img src="x" style="width: 100%; object-fit: contain;">
</div>

容器通过内边距预留上下左右空间，图片宽度设为100%填充剩余区域，同样用object-fit: contain保证比例正确。

如果图片原始高度超过容器剩余高度（容器高度100px减去顶部20px的80px），可以给图片添加max-height: 100%限制纵向尺寸，避免溢出。

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