如何配置div背景图：宽图左右均等溢隐，窄图占满div宽度

当然可以实现这个需求！咱们只需要借助CSS的背景相关属性就能完美搞定，下面是具体的实现方案：

首先，给你的div设置基础样式，然后通过background-size和background-position来控制图片的显示行为：

.custom-div {
  width: 100px;
  /* 这里可以根据需求设置高度，比如固定高度或者让内容撑开 */
  height: 100px; 
  background-image: url('你的图片URL');
  background-position: center center; /* 让图片居中，溢出部分两侧均等隐藏 */
  background-repeat: no-repeat; /* 禁止图片重复 */
  background-size: max(100%, auto); /* 核心属性：图片宽<=div时拉满100%，宽>div时保持原宽 */
}

咱们来拆解一下关键属性：

• background-position: center center：当图片宽度大于div时，这个属性会让图片在div里居中显示，超出div左右两侧的部分会被自动裁剪，刚好满足你“两侧均等隐藏溢出”的要求。
• background-size: max(100%, auto)：这个是核心逻辑：
  • 如果图片原始宽度小于等于100px（div宽度），max(100%, auto)会取100%，把图片宽度拉伸到和div一样宽，高度按比例自适应。
  • 如果图片原始宽度大于100px，max(100%, auto)会取图片的原始宽度，此时图片会比div宽，再配合居中定位，就只会显示中间的100px区域。

需要注意的是，max()函数在background-size中的支持是从现代浏览器开始的，像Chrome、Firefox、Edge这些主流浏览器都没问题，IE浏览器不支持，但现在基本没人用IE了，所以不用担心兼容性问题。

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