实现基于浏览器宽度的大图像背景拉伸的最简单方法

Question

如果您访问www.joinbunch.com并调整浏览器的大小，您可以看到调整大小时背景图像的缩放效果非常好。

实现这一目标的最佳方式是什么？

Answer 1

最简单的方法是使用css background-size cover。这将缩放图像，使其覆盖整个区域。

 #myelement {
     background: url(myback.png) cover;
 }

完整语法：

 #myelement {
     background-image:url(myback.png);
     background-size:cover;
 }

Answer 2

包含图像的<div>的背景图像必须具有属性width到100%。。。或某个其他百分比。

更详细地解释一下：

检查此链接http://css-tricks.com/perfect-full-page-background-image/

通过CSS3

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;
}

"USUAL"方式

HTML标记

<div id="bg">
  <img src="images/bg.jpg" alt="">
</div>

CSS标记

#bg {
  position: fixed; 
  top: -50%; 
  left: -50%; 
  width: 200%; 
  height: 200%;
}
#bg img {
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
  min-width: 50%;
  min-height: 50%;
}

他们还提供了一个演示：

http://css-tricks.com/examples/FullPageBackgroundImage/css-2.php

我推荐那个页面，它有很多css技巧。

希望它能有所帮助！