Css 如何保持此标题的响应性？

我得到了一个模型设计，头部有一个类似于或的曲线图像。在顶端。问题是它必须是流动的和反应灵敏的。我喜欢在开始制作之前先从概念上搞清楚一些事情。有人能帮我怎么做吗。如果我只是让它100%的宽度，它会在某些点上极度扭曲。有什么想法吗？

正如您所猜测的，您可以使用宽度：100%，但随后使用媒体查询将不同的图像提供给不同的屏幕大小，例如：

header {
    width: 100%;
}

@media only screen and (min-width : 480px) {
    header {
        background-image: url("/img/image-xs.png");
    }
}

@media only screen and (min-width : 768px) {
    header {
        background-image: url("/img/image-sm.png");
    }
}

@media only screen and (min-width : 992px) {
    header {
        background-image: url("/img/image-md.png");
    }
}

@media only screen and (min-width : 1200px) {
    header {
        background-image: url("/img/image-lg.png");
    }
}

多重选择的图像可以让你对抗你害怕的像素化。通过在不同的断点处提供最适合屏幕的图像，您将在所有尺寸下保持相对良好的图像质量