Question

我创建了一个使用背景图像的响应式div，唯一的问题是当我调整浏览器窗口大小时，图像会在其下方留下一个空白区域。

HTML

html, body {
    height: 100%;
    width: 100%;
}
#container {
    height: 100%;
    width: 100%;
}
#background-image {
    background-image:url('http://tiny.cc/pm334x');
    height: 320px;
    width: 100%;
    display: block;
    background-size: contain;
    background-repeat: no-repeat;
}

CSS

<div id="container">
    <div id="background-image"></div>
    <p>Hello</p>
</div>

http://jsfiddle.net/qnwe098m/1/

目前我没有选择，我尝试了许多不同的“解决方案”，但没有一个有效。我可以使用媒体查询为不同的分辨率创建多个图像，但我宁愿保持简单。

非常感谢

Answer 1

使用cover作为background-size代替contain

background-size: cover;

＆＃13;

html, body {
    height: 100%;
    width: 100%;
}
#container {
    height: 100%;
    width: 100%;
}
#background-image {
    background-image:url('http://tiny.cc/pm334x');
    height: 320px;
    width: 100%;
    display: block;
    background-size: cover;
    background-repeat: no-repeat;
}

＆＃13;

<div id="container">
    <div id="background-image"></div>
    <p>Hello</p>
</div>

＆＃13;

上面的代码段实际上可能没有显示出差异，所以这里是fiddle

Answer 2

看起来你需要：

background-size: cover;

而不是：

background-size: contain;

我已经更新了小提琴。

http://jsfiddle.net/qnwe098m/2/

Answer 3

你试过了吗？

#include <stdio.h>
#include <stdlib.h>

int main()
{
   int a;
   int b;
   int c;
   scanf("%d", &b);
   scanf("%d", &a);
   c = a + b;
   printf(c);
   return 0;
}

http://jsfiddle.net/qnwe098m/1/

Answer 4

只需将以下代码用于#background-image id

即可

background-position:center;
background-size:cover;

响应的背景图像在调整大小时留下空白

4 个答案: