Question

我总是遇到的问题是，如果拍摄背景图像，我无法看到此图像，直到我给出包含给定的宽度：

<div class="picture">
</div>

.picture {
background-image: url('img/start_bigpic.jpg');
background-size: 100%;
}

这不起作用。即使我更新它喜欢这个图像也不会显示。

.picture {
background-image: url('img/start_bigpic.jpg');
background-size: 100%;
width: 100%;
height: 100%;
}

只有添加基于像素的宽度和高度才能正确显示图像，但我只想在流体网格中使用基于百分比的值。

这是什么解决方案？我可以显示背景图像而不包含基于像素的宽度和包含div的高度吗？

谢谢！

编辑：这是我的问题的解答。除非我使用基于px的高度，否则我无法显示图片： http://jsfiddle.net/t3YZt/

Answer 1

尝试向容器添加一些高度，例如body：

html, body {
    width: 100%;
    height: 100%;
    padding:0;
    margin:0;
}
.picture {
    background-image:url(http://s23.postimg.org/kewe6boez/test_background_image.png);
    background-size: 100%;
    width: 100%;
    height: 100%;
}

JSFIDDLE

Answer 2

为确保您的背景容器有任何宽度，您应该自己照顾（将其高度设置为100％（其父级）或任何其他固定高度，或任何自动高度依赖于内部儿童）。< / p>

然后，您为后台执行以下操作：

.picture{
    background-size:cover; /* this way */
    background-size:content; /* or this one */
}

...根据容器尺寸拉伸图像。

background-image / background-size，没有基于px的宽度

2 个答案: