html - 根据浏览器的宽度制作图片/背景比例

Question

我想知道如何根据浏览器的宽度缩放图片或背景。基本上，我想让它尽可能地响应并确保它能很好地适应包括 Safari 在内的所有浏览器。

这是我正在谈论的例子。

链接:http://responsive.gs/ .调整浏览器的宽度以查看背景比例。

我想让我的图片/背景比例与上面那个链接中显示的完全一样。

希望对此有所帮助。

谢谢。

Answer 1

像他们一样使用background-size:cover:

body {
    background: url("http://responsive.gs/images/bg-phoenix.jpg") no-repeat;
    background-position: center top;
    background-size: cover;
}

EXAMPLE HERE

我还建议看一下 this recent SO answer of mine ，它演示了如何获取渲染背景图像的高度，并相应地缩放背景:

Getting the height of a background image resized using "background-size: contain"

JS:

var img = new Image();
img.src = $('body').css('background-image').replace(/url\(|\)$/ig, "");

$(window).on("resize", function () {
    $('body').height($('body').width() * img.height / img.width);
}).resize();