Question

我的大学让我为一个项目编写一个网站代码，但要让它响应。我用于标题背景的图像没有调整大小。这是HTML的代码

 <div id="headerbackground"></div>

对于我提出的风格

#headerbackground {
background-image: url('../images/header.png');
background-size: contain;
max-width:100%;
max-height: 100%;
}

我已经接受了一些教程，但没有运气

Answer 1

首先，您尚未指定最小高度，只有最大高度，因此它会折叠为0。

其次，您可能希望使用background-size:cover; - 将图像大小调整为<em>覆盖整个元素。包含调整图像大小，使整个符合元素。

＆＃13;

html,
body {
  height: 100%;
}
#headerbackground {
  background-image: url('https://placekitten.com/g/800/600');
  background-size: cover;
  background-repeat: no-repeat;
  max-width: 100%;
  min-height: 100%;
}

＆＃13;

<div id="headerbackground"></div>

＆＃13;

Answer 2

在为此设置高度之前，无法设置空div背景。或者你在div中有一些内容。所以你需要设置div的高度。所以这是你的响应背景图像。您可以检查调整窗口大小的响应性。

body {

  margin: 0;
}

#headerbackground {
  background: url('http://farm3.static.flickr.com/2098/2260149771_00cb406fd6_o.jpg');
  background-size:100% 100%; 
  background-repeat: no-repeat;
  height: 100vh;
}

<div id="headerbackground"></div>

响应背景图像不调整大小

2 个答案: