要按比例调整SVG背景图的大小，可以使用CSS中的background-size属性以及通过JavaScript计算宽高比例的方法。

以下是一个示例的解决方法：

HTML代码：

CSS代码：

.svg-container {
  width: 500px;
  height: 300px;
  position: relative;
}

.svg-background {
  width: 100%;
  height: 100%;
  background-image: url('your-svg-image.svg');
  background-repeat: no-repeat;
  background-size: contain;
}

JavaScript代码：

window.addEventListener('DOMContentLoaded', function() {
  var svgContainer = document.querySelector('.svg-container');
  var svgBackground = document.querySelector('.svg-background');
  
  var svgImage = new Image();
  svgImage.src = 'your-svg-image.svg';

  svgImage.onload = function() {
    var imageWidth = svgImage.width;
    var imageHeight = svgImage.height;
    
    var containerWidth = svgContainer.offsetWidth;
    var containerHeight = svgContainer.offsetHeight;
    
    var widthRatio = containerWidth / imageWidth;
    var heightRatio = containerHeight / imageHeight;
    
    var scaleRatio = Math.min(widthRatio, heightRatio);
    
    svgBackground.style.backgroundSize = (imageWidth * scaleRatio) + 'px ' + (imageHeight * scaleRatio) + 'px';
  }
});

在这个示例中，我们创建了一个包含SVG背景图的容器div，并使用CSS将其大小设置为固定的500px * 300px。然后，通过JavaScript获取容器的宽度和高度，以及SVG图片的宽度和高度。接下来，我们计算容器宽高与图片宽高的比例，并取较小的比例作为缩放比例。最后，将缩放比例应用于背景图的大小，从而实现按比例调整SVG背景图的效果。

请将代码中的"your-svg-image.svg"替换为实际的SVG图片路径。