javascript - 根据浏览器宽度完成大图像背景拉伸的最简单方法？

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

“常规”方式

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 技巧。

希望能帮助到你！