javascript - CSS:调整背景图像的大小而不是切断

Question

我正在使用 javascript 在浏览器调整大小时调整 div 的大小，并在页面加载时初始设置它。 (是的，我知道它需要优雅地降级。)我不能通过 CSS 完成这一切的原因是因为在屏幕顶部有一个高度恒定的固定导航栏需要考虑。我想调整 div(及其渐变背景)的大小以适应浏览器窗口，但是当我更改 CSS height 属性时，它只是剪切图像而不是调整图像大小，这意味着页面的下一部分将无法正确过渡。有没有简单的解决方法？

这是我现在使用的 CSS:

    #homepage_aboutstrip {
        background-image:url('home/images/gradient-about-background.png');
        background-repeat:repeat-x;
        position:absolute;
        margin-top:0px;
        width:100%;
        height:1050px;
        z-index:1;
    }

使用 IMG 标签而不是背景图像显然会有效，但这里不是一个选项。

Answer 1

您可以使用单行 css 来完成。如果可行，试试这个

background-image:url('home/images/gradient-about-background.png');
background-size: cover

如果扩展太多，图像质量可能会受到干扰