css如何设置背景图片自适应？

Question

图片宽是1920px，高度100px
在大屏幕下显示为这样：
横向不拉伸，两边就会留白

background-position: center;
background-repeat: no-repeat;
background-size: auto 100%;

如果铺满屏幕，那么图片会被裁剪

background-position: center;
background-repeat: no-repeat;
background-size: cover;

想要实现的效果是图片高度不变，仅横向拉伸铺满屏幕，请问要使用什么属性设置，或者对于这种标题背景使用什么方式解决？

Answer 1

那就试试 background-size: 100% auto;
横向100%的宽度，纵向auto
当然，如果容器的高度本来就不够显示的话，那么还是会有被裁切的感觉。

Answer 2

.container {
width: 100%; / 设置容器的宽度 /
height: 400px; / 设置容器的高度 /
background-image: url('your-image.jpg'); / 设置背景图片的URL /
background-size: cover; / 使用cover值，使背景图片完全覆盖容器 /
background-repeat: no-repeat; / 防止背景图片重复 /
background-position: center; / 将背景图片置于容器的中心位置 /
}
.container是一个具有指定宽度和高度的容器。background-image属性用于设置背景图片的URL，你需要将your-image.jpg替换为你自己的图片路径。background-size属性设置为cover，这将使背景图片完全覆盖容器。background-repeat属性设置为no-repeat，以防止背景图片重复。background-position属性设置为center，将背景图片置于容器的中心位置。

通过使用这些CSS属性，背景图片将自动调整大小以适应容器的大小，从而实现自适应效果。

Answer 3

{
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;

}

就这样就行了