CSS实现：图片不随页面大小变化而缩放

代码实现

{
    height: 380px; // 不必须
    width: 100%;	// 不必须
    background: url(...) center center / cover no-repeat fixed;
    overflow: auto,
}

主要是利用background的几个属性来实现的

核心代码 —— background: url(...) center center / cover no-repeat fixed

上述这一行代码相当于下面几行代码👇

{
    background-image: url(...);
    background-position-x: center;
    background-position-y: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-origin: initial;
    background-clip: initial;
    background-color: initial;
}

• background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。fixed表示当页面的其余部分滚动时，背景图像不会移动。
• background-repeat 属性设置是否及如何重复背景图像。no-repeat 表示背景图像将仅显示一次
• background-size 属性规定背景图像的尺寸。cover表示把背景图像扩展至足够大，以使背景图像完全覆盖背景区域，但背景图像的某些部分也许无法显示在背景定位区域中。