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();

Answer 2

我们可以尝试背景大小：100％100％;解决它。

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

Answer 3

使用示例中的代码，您可以在如下页面中使用它：

<head>
<style>
body
{
  background: url("http://www.responsive.gs/images/bg-phoenix.jpg") no-repeat;
  background-position: center top;
  -webkit-background-size: cover;
  background-size: cover;
  background-attachment: fixed;
}
</style>
</head>

<body>
</body>

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

3 个答案: