Highcharts背景图像大小选项

我正在使用Highcharts在网页上呈现图表。 现在我发现了一个问题，如果我在容器div上使用min-width和max-width CSS选项：

我用这种方法添加了背景图像：

 Highcharts.theme = { chart: { backgroundColor: '#FFFFFF', plotBackgroundImage: '/path/to/mybackgroundimage.png' } }; 

此图像宽度为960像素，高度为400像素，在桌面上显示效果很好，但如果我在移动设备上查看图像的图像比例已经消失，图像会变形。

是否有backgroundSize:'cover'或类似的东西来固定不同屏幕宽度的图像位置和大小？

Answer 1

您可以禁用plotBackgroundImage参数并将backgroundColor设置为透明。 然后在CSS中应用背景img（用于容器）。

CSS

 #container { background:url(http://sofzh.miximages.com/javascript/skies.jpg) 0% 0%; background-size:cover; } 

图表：

 chart: { backgroundColor: 'rgba(0,0,0,0)', type: 'line' } 

示例 – http://jsfiddle.net/4q7atyt9/

Answer 2

我认为你可以使用rem而不是px 。

rem被称为“root em”可以根据屏幕大小改变大小。

注意：

10px = 0.625rem; 16px = 1rem;

Answer 3

在你的CSS

 @media screen and (min-width: 480px) and (max-width:980px) { #container { min-width: 20rem; //change the size max-width: 60rem; height: 15rem; } }