Javascript 容器应自动调整到背景图像的高度，仅用于响应设计css

我正在进行响应性设计。
如果我加载带有图像标签的图像，我的大小没有问题，但是即使我设置display:none，它也会加载到屏幕上。这会导致智能手机设备出现加载问题…
通过这种方式，我尝试使用背景大小来缩放它：contain，但问题是我必须为容器添加一个高度。
这意味着如果我有一个不同宽度的设备，图像就不适合了。
同样的背景尺寸问题：封面。如果我改变宽度，图像就会溢出
只需使用css即可，因为有很多图片，这会导致javascript加载问题

#header {
    width: 100%;
    background-image:url(../images/backgrounds/Header_phone2.jpg);
    background-size:contain;
    background-repeat:no-repeat;
    min-height: 200px;
}

编辑

---

我的JS解决方案在答案中，欢迎改进提示

我现在做了一些东西，对我来说很好。
我对jquery不是很在行，因此我期待着改进TIPP。

Html:
容器中的容器…

Css几乎保持不变：

#header {
    height:auto;
}
#header-image{
    width: 100%;
    min-height: 155px;
     background-image:url(../bilder/backgrounds/Header_phone2.jpg);
     background-size:cover;
     background-repeat:no-repeat;
    }

Jquery：

if ($( window ).width() <= 966) {
  var screenwidth = $(window).width();
    var heightimage = (screenwidth /940) * 198;
    $("#header-image").css("height", heightimage);
}

  $(window).resize(function() {
  if ($( window ).width() <= 966) {
      var screenwidth = $(window).width();
      var heightimage = (screenwidth /940) * 198;
      $("#header-image").css("height", heightimage);
    }
  });

---

if（$（window）.width（）我现在做了一些东西，什么对我有用。

我对jquery不是很在行，因此我期待着改进TIPP。


Html:

容器中的容器…


Css几乎保持不变：

#header {
    height:auto;
}
#header-image{
    width: 100%;
    min-height: 155px;
     background-image:url(../bilder/backgrounds/Header_phone2.jpg);
     background-size:cover;
     background-repeat:no-repeat;
    }

Jquery：

if ($( window ).width() <= 966) {
  var screenwidth = $(window).width();
    var heightimage = (screenwidth /940) * 198;
    $("#header-image").css("height", heightimage);
}

  $(window).resize(function() {
  if ($( window ).width() <= 966) {
      var screenwidth = $(window).width();
      var heightimage = (screenwidth /940) * 198;
      $("#header-image").css("height", heightimage);
    }
  });

if（$（window）.width（）您的问题是什么？容器的高度应自动调整为背景图像的高度。我现在更改了问题标题。Sry表示我的英语不好。我希望现在更清楚。没有javascript您无法做到这一点：（，现在有可能了？那么其他人如何为智能手机缩放图像，每个设备设置有许多不同的图片？你必须研究何时以及如何仅在需要时加载图像。这是一个复杂的问题。你的问题是什么？容器的高度应自动调整为背景图像的高度.我现在更改了问题标题。Sry代表我糟糕的英语。我希望现在更清楚。没有javascript，你无法做到这一点：（，现在有可能了？那么其他人如何为智能手机缩放图像，每个设备设置有许多不同的图片？你必须研究何时以及如何仅在需要时加载图像。这是一个复杂的问题。