调整 div 背景的大小答案

【问题标题】：Resizing a div background调整 div 背景的大小
【发布时间】：2015-04-06 14:55:13
【问题描述】：

一开始我想为我的英语道歉..
但切入正题——我做我的第一个网站，但我的 div 背景有问题。当我像http://kamilnizinski.pl 或http://rumblelabs.com 这样调整浏览器窗口的大小时，我想更改 div 的背景分辨率 - 因为您可以看到在调整窗口大小时背景正在完全改变分辨率。在我的 CSS 文件中，我有

.background { 
height: 100%; 
background-image: url('img/background.png'); 
background-repeat: no-repeat; 
background-attachment: fixed; 
background-size: cover; 
background-position: center; }

所以我在不调整大小的情况下获得了图像的一部分。所以我的问题是 - 我怎样才能得到这种效果？我必须更改 CSS 中的某些内容还是必须使用 javascript/jQuery？
提前感谢您的回答。

【问题讨论】：

标签： javascript jquery html css frontend

【解决方案1】：

简单示例：

http://jsfiddle.net/xkaL2rho/

html:

<div class='background' />

css:

.background{
    background-image: url(http://blendr.io/wp-content/uploads/2014/05/Polygon-Background-2.jpg);
    background-size: cover;
    height:100%;
}
html, body{
    height:100%;
    width:100%;
}

另一种方法是使用javascript：

http://jsfiddle.net/xkaL2rho/1/

css:

.background{
    background-image: url(http://blendr.io/wp-content/uploads/2014/05/Polygon-Background-2.jpg);
    background-size:cover;
}
html, body{
    height:100%;
    width:100%;
}

js:

$(window).resize(function(){
    doResize()    
});

function doResize(){
    var width = $(window).width();
    var height = $(window).height();
    $('.background').css({'width':width+'px',height: height+'px'})
}

doResize();

【讨论】：

【解决方案2】：

我不完全确定你提到的网站是如何做到这一点的，但我建议在你的 css 中使用 @media 标签

媒体标签允许您根据屏幕大小定义 css 规则。

查看这篇关于@media 和屏幕尺寸的 Google 基础知识文章。 Use CSS media queries for responsiveness

我建议使用它的原因是，您不仅可以控制图像，还可以通过屏幕大小控制文本或按钮等任何内容。

【讨论】：