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

container should automatically adjust to the height of the background image for responsive design css only

本文关键字：用于 响应 CSS 高度 调整 图像 背景      更新时间：2023-09-26

我正在做一个响应式设计。
如果我使用图像标签加载图像，我对大小没有问题，但是即使我设置 display：none 它也会加载到屏幕上。这会导致智能手机设备上的加载问题...
这样，我尝试使用背景大小：包含来缩放它，但问题是我必须为容器添加高度。
这意味着如果我有一个不同宽度的设备，图像就不会更适合。
背景大小：封面也有同样的问题。如果我改变宽度，图像会流过。
只会用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，这样我期待着改进

。目录：
集装箱中的容器...

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 标签的图像一样，并且图像不会加载屏幕设计。（看那里）
如果禁用了javascript设置最小高度，则也会像这样显示图像。
使用jquery，我计算图像的高度。为此，我从显示器中获取宽度，将其除以图像宽度，然后将其与图像的高度相乘。=>容器的正确高度。
使用窗口调整大小功能，您可以更改窗口的大小，它仍然有效。

这很简单，对我来说很好用。

点击查看 Jsfiddle。

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


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

相关文章：