背景图无法适配容器：图片对比工具中背景图放大异常排查

你的新图出现放大失真的核心原因是：HTML的style属性中使用background简写属性时，会覆盖CSS中定义的background-size值。

background是复合属性，它会一次性重置所有背景相关子属性（包括background-size）。你在CSS里给.cd-resize-img设置了background-size: cover，但HTML的style里用background: url(...) no-repeat left top直接覆盖了这个设置，导致background-size被重置为默认值auto，图片无法适配容器，最终出现失真。

修复方案 #

由于你必须在style属性中设置背景图，有两种简单的修复方式：

方式1：拆分background复合属性 #

把style里的background简写拆分为单独的子属性，避免覆盖background-size：

<div class="cd-resize-img" style="background-image: url('https://static01.nyt.com/images/2022/04/13/science/15SCI-CREATIVITY-vid-image/15SCI-CREATIVITY-vid-image-videoSixteenByNineJumbo1600.jpg'); background-repeat: no-repeat; background-position: left top;">
  <span class="cd-image-label" data-type="modified">Modified</span>
</div>

这样CSS里的background-size: cover就能正常生效，图片会自适应容器尺寸。

方式2：在style属性中直接指定background-size #

如果需要更直接，也可以在style里明确加上background-size：

<div class="cd-resize-img" style="background: url('https://static01.nyt.com/images/2022/04/13/science/15SCI-CREATIVITY-vid-image/15SCI-CREATIVITY-vid-image-videoSixteenByNineJumbo1600.jpg') no-repeat left top; background-size: cover;">
  <span class="cd-image-label" data-type="modified">Modified</span>
</div>

这种方式不需要依赖CSS里的设置，直接在style中完成所有背景属性的定义。

验证效果 #

修复后，.cd-resize-img的背景图会按照容器尺寸自适应，使用cover模式时会保持图片比例并填满容器，不会再出现放大失真的情况。

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