前端 - 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: contain;。此设置会保持背景图像的纵横比，因此图像不会被拉伸或压缩。

以下是完整的 CSS 代码示例：

body {    background-image: url('your-image-url');    background-position: center;    background-repeat: no-repeat;    background-size: contain;}

此设置将使背景图像的高度保持不变，同时图像的宽度会根据屏幕大小自动调整以填充整个屏幕。请注意，图像的两边可能会被剪裁，以保持图像的纵横比。如果您希望图像完全可见并且不留白，可能需要使用其他的解决方案，比如使用 JavaScript 来动态调整图像的宽度。