容器应自动调整为仅用于响应式设计 css 的背景图像的高度答案

【问题标题】：container should automatically adjust to the height of the background image for responsive design css only容器应自动调整为仅用于响应式设计 css 的背景图像的高度
【发布时间】：2016-02-25 18:31:39
【问题描述】：

我从事响应式设计。
如果我使用图像标签加载图像，我对大小没有问题，但即使我设置显示：无，它也会加载到屏幕上。这会导致智能手机设备出现加载问题...
这样我尝试使用背景大小：包含来缩放它，但问题是我必须为容器添加高度。
这意味着如果我有一个宽度不同的设备，则图像不适合更多。
背景尺寸：封面也有同样的问题。如果我改变宽度，图像就会溢出。
只用css就可以了，因为有很多图片，这会导致javascript加载问题。

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

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

【问题讨论】：

您的问题是什么？
容器的高度应自动调整为背景图像的高度。我现在更改了问题标题。对不起我的英语不好。我希望现在更清楚了。
如果没有 javascript，您将无法做到这一点。
:(，现在有可能吗？那么如何为智能手机缩放图像，每个设备设置都有许多不同的图片？
您必须研究何时以及如何仅在需要时加载图像。这是一个复杂的主题。

标签： javascript css image responsive-design background

【解决方案1】：

我现在做了一些对我有用的东西。
我不太擅长 jquery，这样我期待改进提示。

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);
    }
  });

这太棒了！就像您添加带有 img 标签的图像并且图像不加载屏幕设计一样。 (look there)
如果禁用 javascript 设置最小高度，则图像也会像这样显示。
使用 jquery 我计算图像的高度。为此，我从显示器中获取宽度，将其除以图像宽度并将其乘以图像的高度。 => 容器的正确高度。
使用 windows-resize 功能，您可以更改窗口的大小，它仍然可以工作。

这非常简单，对我来说效果很好。

Click for Jsfiddle.

如果您使用 js 脚本从 img 标签中删除 src 路径，那么它也会发送请求。使用此变体，您没有问题，请查看第一个链接。

一些熟练的人可以改进这一点：用 jquery 选择图像的宽度和高度并制作一个函数。

【讨论】：