背景图片如何做成响应式？

Question

背景图片如何做成响应式？
老板给的思路是jquery获取浏览器宽度，计算比例，为背景图片设置百分比。
重点是还是弄不出来，得如何计算比例

Answer 1

background-size：定义背景图呈现在div中的区域大小
取值cover，目的是完全覆盖div，并且图片缩放至最小大小
取值contain，目的是在div中完全显示自己，并且图片缩放至最大大小
分别试试看这两个属性，看看行不行

Answer 2

先看一下图片的属性大小是多少，然后计算一下宽/高,假设比例是0.7；
页面加载时，var h=$(window).height();
$("pic").height(h);
$("pic").width(h*0.7);
$(window).resize时，var h=$(window).height();
$("pic").height(h);
$("pic").width(h*0.7);

不知道你要的是不是这个效果

Answer 3

看楼主这样应该是不需要兼容ie8这种低版本浏览器，background-size:cover;就可以。

Answer 4

使用 背景图片 + padding-top: 百分比(img W : H )

Answer 5

background-size: cover