嗨，很高兴能帮你搞定这个需求！你要的Fill效果其实正好对应CSS里的background-size: cover属性，完全符合你描述的“保持宽高比、贴合屏幕两侧、裁剪多余部分”的要求。

具体实现代码 #

你可以直接定义.fill类，搭配background-position: center center来保证裁剪的是图片的中间区域（视觉呈现会更自然）：

.fill {
  background-repeat: no-repeat;
  background-size: cover; /* 核心属性：按比例缩放图片覆盖容器，超出部分自动裁剪 */
  background-position: center center; /* 让图片居中对齐，裁剪掉上下/左右的边缘部分 */
}

和你现有Center效果的区别对比 #

• Center效果：background-size: auto auto会保留图片原始分辨率，仅做居中显示——如果图片比容器小会留白，比容器大则只展示中间区域，不会缩放图片。
• Fill效果：background-size: cover会自动缩放图片，确保图片的宽或高中至少有一边完全贴合容器边缘，另一边超出的部分被裁剪，全程严格保持图片的原始宽高比。

额外实用小提示 #

如果你的容器设置了padding或者border，可以加上background-origin: border-box，让背景图从边框位置开始覆盖（默认是从padding区域开始），能更精准地控制显示范围：

.fill {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-origin: border-box; /* 可选配置：让背景覆盖至边框区域 */
}

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