背景图像流体调整大小

时间:2013-02-20 08:37:28

标签: background fluid

我正在使用标题标记内的背景图片。编码如下:

<div id "header">
<div id "logo">
<div id "nav">


</div>
</div>
</div>

标题位于容器元素内,容器元素的大小为宽度:75%。徽标图像宽1024px,高75px。我试图找到一种解决方案,将徽标图像保持在容器元素的100%宽度的背景标记内,并且当重新调整大小时,它会按比例重新调整大小。

我想到的解决方案是

background-size:auto;

我选择1024px,因为它可以容纳大多数屏幕。最小宽度为780px,最大宽度为1024px。

让这个背景图片按照访客屏幕及其所在的容器元素的比例重新调整大小的最佳解决方案是什么。

由于

3 个答案:

答案 0 :(得分:0)

试试这个:

 background-size: 100%;

答案 1 :(得分:0)

我发现最好的方法是

最小宽度:100%;

答案 2 :(得分:0)

调整背景大小的唯一方法是使用JavaScript。

使用jQuery的代码在这里:https://gist.github.com/epoberezkin/5070642