Question

我正在网站上工作。主页上的背景是图像。我已为此网站测试了更多分辨率。我把分辨率设置为1920x1536并看到结果：

enter image description here

这是我的CSS：

body.Homepage
{
    background:url(homepage/Background1.jpg) no-repeat top;
}

如何缩放图像以适合浏览器？（除了重新调整照片大小）。

Answer 1

background-size: cover;

参考文献：

http://www.w3.org/TR/css3-background/#the-background-size

Answer 2

如果我理解您的问题，我认为您希望将背景扩展到浏览器窗口大小。我没有这方面的纯CSS解决方案，而是一个JavaScript + jQuery解决方案。这样就可以了。

Backstretch 是一个简单的jQuery插件，可让您将动态调整大小，支持幻灯片的背景图像添加到任何页面或元素
Full Size Background Image jQuery Plugin: Redux 教程。在Safari，Chrome和Firefox中进行了测试，现在可以很好地运行。您只需要一张想要显示为背景的图像。一旦你拥有并使用插件，图像将调整大小到浏览器窗口的整个宽度/高度。每次浏览器窗口调整大小时，背景图像也会调整。
jQuery scalable fullscreen background image 教程。

这是一种使用纯CSS 获取全屏背景图像的技术。但我没有测试过它。 Here 是演示。

CSS

html, body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

#full-screen-background-image {
  z-index: -999;
  min-height: 100%;
  min-width: 1024px;
  width: 100%;
  height: auto;
  position: fixed;
  top: 0;
  left: 0;
}

#wrapper {
  position: relative;
  width: 800px;
  min-height: 400px;
  margin: 100px auto;
  color: #333;
}

HTML

<body>
  <img alt="full screen background image" src="/background.jpg" id="full-screen-background-image" /> 
  <div id="wrapper">
    <p>Content goes here...</p>
  </div>
</body>

参考：http://paulmason.name/item/full-screen-background-image-pure-css-code

Answer 3

我通过使用具有负z-index且没有边距的固定img来实现这是一种相当hackish的方式，即宽度和高度为100％。 http://jsfiddle.net/howderek/jTPUN/

这样做的缺点是背景是通过HTML而不是CSS，但从好处来看，没有JS。

如果你想要滚动背景图片，只需要它是绝对的而不是固定的。

HTML：

<img src="http://derek.genevievehoward.com/images/unicorn.jpg" id="bg" alt=""/>

CSS：

#bg {
    width: 100%;
    height: 100%;
    margin: 0;
    z-index: -1;
    position: fixed;
    top: 0px;
    left: 0px;
}

Answer 4

除background-size: cover;以外，您还可以使用

background-size: contain;

报价参考：http://www.w3schools.com/cssref/css3_pr_background-size.asp

将图像缩放到最大尺寸，使其宽度和高度都适合内容区域

Answer 5

请记住，如果您只使用以下CSS：

<强>包含

缩放图像，同时保留其固有的宽高比（如果有的话），   最大尺寸，使其宽度和高度都适合   在背景定位区域内。

<强>盖

缩放图像，同时保留其固有的宽高比（如果有的话），   到最小的尺寸，使其宽度和高度都可以   完全覆盖背景定位区域。包含始终适合   视口中的整个图像，保留不透明边框   每当比例时，无论是上下还是左右   背景图片和浏览器窗口不一样。

封面总是填满浏览器窗口，切掉一些头发或耳朵   在这个过程中，这是我个人更喜欢的大多数情况。您   可以使用控制来控制图像在视口中的对齐方式   背景位置属性。

这意味着使用这些方法中的任何一种都会导致图像按比例缩放。唯一的区别是，如果屏幕分辨率与图像的宽高比不匹配，则会从图像中剪切部分以使其适合;如果屏幕分辨率与图像的宽高比不匹配，则另一个将添加空白区域。

如果您的起始图像不够大，无法覆盖您指定的屏幕分辨率（和/或长宽比不同），则无论您使用哪个选项，都会留下空白区域。

背景未正确显示

5 个答案: