随着浏览器大小的变化，Html/Css 调整大小和裁剪答案

【问题标题】：Html/Css resize and crop as browser size changes随着浏览器大小的变化，Html/Css 调整大小和裁剪
【发布时间】：2013-05-20 10:22:39
【问题描述】：

我最近在做一个项目，感谢一个友好的教程，我设法找到了以下代码。

CSS

html { 
background: url(images/bg.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

此代码调整背景图像的大小，以便图像在保持正确比例的同时填满整个屏幕，如果图像的一部分大于屏幕，它会在裁剪图像时执行此操作。

我遇到的问题是我需要将图像放在“跟随”背景的网页上。（覆盖与浏览器调整大小相同的背景区域，总是相同的比例......等等）但是在我尝试过的所有方法中，它们都不起作用，我想知道如果可能的话。

或者换句话说，不把图片做背景也能达到同样的效果吗？

【问题讨论】：

我认为你需要一些 js。可能是这样的插件srobbin.com/jquery-plugins/backstretch
我真的无法理解这里的要求。
您能详细描述一下您的问题吗？
我的意思基本上是，使用上面的 CSS 使图像表现得像背景。

标签： html css image resize window

【解决方案1】：

使用“背景尺寸：封面”。

.sizedbkgrd {
  position: absolute;
  top: 0px;
  left: 0px;
  bottom:0px;
  right:0px;
  background-image: url(http://i3.photobucket.com/albums/y89/Aden93/dance-party.jpeg);
  background-repeat: no-repeat;
  background-size:cover;
}

使用该类创建一个 div。

<div class="sizedbkgrd"></div>

jsFiddle：

http://jsfiddle.net/alforno/gXdRf/

【讨论】：