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

希望它有所帮助！

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

2 个答案: