当div宽度为vmin单位时，如何让图片自动适配div？

你的问题核心在于默认盒模型（content-box）的计算逻辑，再加上代码里重复定义了width和padding属性，导致背景图的显示区域和预期不符：

• 默认box-sizing: content-box时，元素实际宽高是「设置的width/height + padding + border」，你写的80vmin只是内容区大小，加上padding后整体元素尺寸变大，但背景图是基于内容区计算的，所以看起来像是“超出div范围”
• 重复定义的属性不仅冗余，还容易混淆逻辑

修复后的代码 #

.display-box {
  width: 80vmin;
  height: 80vmin;
  padding: 50px 40px;
  /* 关键：让padding包含在设置的width/height内 */
  box-sizing: border-box;
  background-image: url("paper.gif");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

关键调整说明 #

• 加box-sizing: border-box：让width/height直接包含padding和border，元素实际尺寸就是你设置的80vmin，背景图的计算区域会覆盖整个元素（包括padding部分）
• 删掉重复的width和padding，保持代码整洁
• 明确background-position: center和background-repeat: no-repeat，确保背景图居中且不重复

如果需要完整显示背景图（不裁剪），可以把background-size: cover换成background-size: contain，只是可能会在元素边缘留空白，按需切换即可。

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