0

I am working on a website. The background on the homepage is an image. I have tested more resolutions for this website. I put the resolution of 1920x1536 and see the result:

enter image description here

Here is my CSS:

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

How can I scale the image to fit the browser? (besides of re-sizing the photo).

4

5 回答 5

1 
background-size: cover;

参考：

于 2013-01-26T15:21:51.170 回答
1

如果我很好地理解了您的问题，我认为您想将背景拉伸到浏览器窗口大小。我没有纯 CSS 解决方案，而是 JavaScript + jQuery 解决方案。这会成功的。

  1. Backstretch是一个简单的 jQuery 插件，它允许您向任何页面或元素添加动态调整大小、支持幻灯片的背景图像
  2. 全尺寸背景图像 jQuery 插件：Redux教程。在 Safari、Chrome 和 Firefox 中对其进行了测试，现在可以完美运行。您所需要的只是一张您想要显示为背景的图像。拥有并使用插件后，图像将调整为浏览器窗口的全宽/高度。每次浏览器窗口调整大小时，背景图像也会随之调整。
  3. jQuery 可缩放全屏背景图片教程。

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

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

于 2013-01-26T16:32:48.643 回答
1

我通过使用具有负 z-index 且没有边距的固定 img（宽度和高度为 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;
}
于 2013-01-26T21:18:11.380 回答
0

如果你打算只使用 CSS，请记住：

包含

将图像缩放到最大尺寸，同时保留其固有纵横比（如果有），使其宽度和高度都可以适合背景定位区域。

覆盖

缩放图像，同时保留其固有纵横比（如果有），使其宽度和高度都可以完全覆盖背景定位区域。包含始终适合您的视口中的整个图像，只要背景图像和浏览器窗口的比例不同，就会在上下或左右留下不透明的边框。

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

这意味着使用这些方法中的任何一种都会导致图像按比例缩放。唯一的区别是一个会切掉图像的一部分以使其适合，另一个会在屏幕分辨率与图像的纵横比不匹配时添加空白。

如果您的起始图像不足以覆盖您指定的屏幕分辨率（和/或纵横比不同），则无论您使用哪个选项，都会留下空白。

于 2013-01-26T16:59:38.553 回答
0

Other than background-size: cover; you may also use 

background-size: contain;

Quote reference: http://www.w3schools.com/cssref/css3_pr_background-size.asp

Scale the image to the largest size such that both its width and its height can fit inside the content area

于 2013-01-26T15:28:16.743 回答