如何让图片缩放突破列表项宽度限制？

你遇到的问题本质是默认有序列表的<li>元素受限于列表编号的定位规则，导致图片无法突破其内容区宽度，调整<li>宽度又会影响编号与文本的间距。下面是几个可行的解决思路：

方案1：负外边距+Calc宽度（最快解决） #

通过给图片设置负左外边距，同时用calc()扩展宽度，让图片向左延伸但不覆盖编号：

/* 给有序列表预留足够的编号空间，避免图片覆盖 */
ol {
  padding-left: 2em;
  list-style-position: outside; /* 保持编号在li外部，默认值可省略但明确更稳妥 */
}

img.scale {
  width: calc(100% + 1.5em); /* 图片宽度 = li内容区宽度 + 向左延伸的距离 */
  margin-left: -1.5em; /* 向左偏移对应距离，抵消宽度扩展的影响 */
}

解释：ol的padding-left给编号留出足够位置，图片通过负边距向左扩展，既突破了li的内容区限制，又不会碰到编号，同时编号和文本的间距保持正常。

方案2：绝对定位（完全脱离li内容流） #

将图片设为绝对定位，让它相对于<li>定位，彻底摆脱内容区限制：

li {
  position: relative; /* 作为图片定位的参考容器 */
  padding-left: 2em; /* 给编号留空间 */
  padding-bottom: 1em; /* 避免图片和下方内容重叠 */
}

img.scale {
  position: absolute;
  left: 0; /* 对齐ol的左侧边缘 */
  width: 100%; /* 图片宽度等于整个ol的宽度 */
  top: 2em; /* 调整此值，避开li里的文本内容 */
}

注意：如果li里的文本高度变化，需要调整top值，或者给li添加足够的内边距来避免重叠。

方案3：CSS Grid自定义列表布局（最灵活可控） #

隐藏默认列表编号，用CSS Grid重新布局编号和内容，让图片可以跨列占满整个宽度：

ol {
  list-style: none; /* 隐藏默认编号 */
  padding-left: 0;
  counter-reset: list-item; /* 初始化计数器 */
}

li {
  display: grid;
  grid-template-columns: auto 1fr; /* 第一列放编号，第二列放文本 */
  gap: 0.8em; /* 编号和文本的间距，可按需调整 */
  margin-bottom: 1em; /* 列表项之间的间距 */
  counter-increment: list-item; /* 递增计数器 */
}

/* 生成自定义编号 */
li::before {
  content: counter(list-item);
  text-align: right;
  padding-right: 0.3em;
  /* 可以给编号加样式，比如颜色、字体大小 */
  color: #666;
}

img.scale {
  grid-column: 1 / -1; /* 图片跨占所有列，宽度铺满整个li */
  width: 100%;
}

这个方案可以完全自定义编号的样式、间距，图片宽度不受任何限制，同时不会出现编号和文本间距异常的问题。

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