背景大小：更改浏览器大小时包含太多空格

Question

如果我使用 background-size:contain;，当浏览器大小改变时如何消除空白？

图像和文本之间的空白对于较小的浏览器来说太多了。网站是：http://16debut.com/test.html

CSS 是：

body { 
    margin:0px 0px; 
}

#hero {
    background-clip: content-box;
    background-image: url("imgtop.png");
    background-size: contain;
    background-repeat: no-repeat; 
    position: relative;
    height: 235vh;
}

#content {
    padding: 100px 50px;
    text-align: center;
    width: 80%;
    margin: 0px auto;
}

#content h2 {
    margin: 0px 0px 30px 0px;
}

#footer {
    padding: 30px 0px;
    text-align: center;
    background: #ddd;
}

Answer 1

jsbin demo

您想充分响应，但要保持底部的白云吗？

对同一元素使用两个背景图像。

剪下白色底部的云彩另存为单独的 .png 图像。用作第一个背景图像。
(optional) 再次保存更大的图像，只是没有白云。使用该图像作为第二个背景图像值。

现在 CSS:

将云设置为 background-position: bottom 和 100% 大小 ("width")
将较大的图像设置为居中 (50%) 位置并且 cover

CSS

html, body{height:100%; margin:0;}

#hero{
  position:relative;
  height:130vh; /* USE THE RIGHT RATIO since the image Logo is a bit up*/
  background: no-repeat 
    url(http://i.stack.imgur.com/eWFn6.png) bottom / 100%, /* BOTTOM CLOUDS OVERLAY */
    url(http://i.stack.imgur.com/IVgpV.png) 50% / cover;   /* BIG IMAGE */
}

HTML

<div id="hero"></div>

<div class="other">
  <h1>Other Divs</h1>
  <p>bla bla</p>
</div>

似乎 Safari 是一个非常愚蠢的浏览器（他们甚至从 2012 年开始就取消了对 windows 的支持......太神奇了）。这是 jsBin example 和 css:

#hero{
  position:relative;
  height: 900px;
  height: 100vh; 
  background: url(http://i.stack.imgur.com/eWFn6.png) no-repeat bottom, url(http://i.stack.imgur.com/IVgpV.png) 50%;
  background-size: 100%, cover;
}

背景大小：更改浏览器大小时包含太多空格

background-size: contain too much whitespace when changing browser size

html

css

whitespace

contain

background-size