[Odoo CMS]-根据客户端设备的分辨率，背景图像必须以最佳大小提供

Question

我正在尝试研究如何进行此操作。根据客户端设备的分辨率，必须以最佳大小提供背景图像。

*我检查了一下"srcset"，但我知道srcset不适用于css背景图像。图像集css表示法在css 4草案中，但未得到广泛支持：https://caniuse.com/#search=image-设置

有什么建议我该怎么做吗？

Answer 1

您不需要javascript。它内置在CSS中。

div {
background-image:url(path/to/big/image.png);
}
@media(max-width:1200px) {
div {
background-image:url(path/to/medium-large/image.png);
}
}
@media(max-width:1000px) {
div {
background-image:url(path/to/medium/image.png);
}
}
@media(max-width:800px) {
div {
background-image:url(path/to/small-medium/image.png);
}
}
@media(max-width:500px) {
div {
background-image:url(path/to/small/image.png);
}
}

现在，根据您的屏幕大小，您将获得适当大小的图像。如果您想要更精细的控制(例如，每50个像素的断点(，您可以添加任意数量的断点，但对于每个断点，您需要以适当的大小保存图像，或者使用服务器端软件以指定的大小生成图像。