在 CSS 中要让背景图片在不拉伸变形的前提下尽可能占满容器同时不留空余部分（即保持图片的纵横比并且填充整个容器）可以使用 background-size 属性并设置为 cover

.container {  background-image: url('image.jpg');  background-position: center;  background-repeat: no-repeat;  background-size: cover; }

这样设置的效果是：

background-image: url('imagejpg')：设置背景图片的 URL

background-position: center：将图片居中显示如果容器尺寸与图片比例不同图片会从中心点开始向外扩展以填满容器

background-repeat: no-repeat：禁止图片重复确保图片只显示一次

background-size: cover：这个关键属性会让背景图片按需缩放以适应容器尺寸保证图片完全覆盖容器即使这意味着图片的某些部分可能无法完全展示在容器内（根据容器和图片的相对比例裁剪图片的顶部、底部、左侧或右侧）