在 CSS 中,要让背景图片在不拉伸变形的前提下尽可能占满容器,同时不留空余部分(即保持图片的纵横比并且填充整个容器),可以使用 background-size
属性,并设置为 cover
。
.container { background-image: url('image.jpg'); background-position: center; background-repeat: no-repeat; background-size: cover; }
这样设置的效果是:
在 CSS 中,要让背景图片在不拉伸变形的前提下尽可能占满容器,同时不留空余部分(即保持图片的纵横比并且填充整个容器),可以使用 background-size
属性,并设置为 cover
。
.container { background-image: url('image.jpg'); background-position: center; background-repeat: no-repeat; background-size: cover; }
这样设置的效果是: