如何在不丢失比例的情况下使背景图像具有响应性

Question

我正在使用 HTML 和 CSS3 制作动画，我需要与背景图像一起适应。问题是内容停留在div 内。我为此设置了height 和宽度fixed，但不起作用。当我尝试使用动态比例（% 或 auto）和 background-size: contain; 时，动画不遵循原始路径。

按照路径固定大小：

移动设备也可以正常工作

但是，不是响应式的：

动态大小是响应式的，但不遵循路径：

更改代码：

 #main{
   position:relative;
-  left: 0;
-  height: 1366px;
-  width: 980px;
+  // left: 0;
+  height: 100%;
+  width: 100%;
   overflow:hidden;
   background: url('../images/bg.png');
   background-repeat: no-repeat;
-
+  background-size: contain;
 }

DEMO

这是我的index.html

  <div id="main">
    <div class="participant" style="z-index: 4;">
  <div class="car">
      <img class="photo" src="https://scontent-atl3-1.xx.fbcdn.net/v/t1.0-1/c21.21.259.259/s50x50/529297_568082979888645_1727470385_n.jpg?oh=c75505b8b23ff9abd26be1fd5771f81d&amp;oe=582BAD0F" alt="">
      <img class="sprite" src="http://i.imgur.com/OwYhg9T.png" alt="">
    </div>
  </div>


  </div>

还有我的animation.css

@charset "utf-8";
/* CSS Document */
body, html {
  height: 100%;
}


body {
  padding:0;
  margin:0;
}

#main{
  position:relative;
  left: 0;
  height: 1366px;
  width: 980px;
  overflow:hidden;
  background: url("http://i.imgur.com/G4gs6EG.png");
  background-repeat: no-repeat;

}



@-moz-keyframes move
{
  from {
    right: -30%;
    top: 8%;
  }

  to {
    right: 140%;
    top: 80%;
  }
}

@-webkit-keyframes move
{
  from {
    right: -30%;
    top: 8%;
  }

  to {
    right: 140%;
    top: 80%;
  }
}

.participant {
  position: absolute;
  display: inline-block;
  height:200px;
  width: 200px;
  right: 140%;
  top: 80%;
  -moz-animation:move 10s  linear infinite;
  -webkit-animation:move 10s  linear  infinite;
}

.sprite{
  width: 100%;
  height: 100%;
}

.photo{
  position: relative;
  top: 128px;
  left: 99px;
  width: 50px;
  height: 50px;
}

Answer 1

这有点棘手，需要固定背景图片的纵横比。

1。让一切响应。

首先，如果一切都是%-based，但汽车是px-based，这将不起作用（因为如果你调整窗户的大小，一切都会变小，但汽车会保持不变），所以对于初学者来说，你是将不得不将汽车的尺寸更改为百分比。

2。修正纵横比。

然后您需要使用mix of absolute and relative positions and paddings 修复纵横比。

在您的情况下，您的包装器的 CSS 将类似于：

width: 100%;
padding-bottom: 71.74%; /* 980/1366 = ~ 0.7174 */

（你的背景图片是 980x1366px）

DEMO

3。未来证明：在每个屏幕上填满屏幕。

不幸的是，由于宽高比本身，您无法对图像周围的空白做太多处理，我个人会寻找 16:9 的图像作为背景，它可以完美地适合大多数台式机/笔记本电脑屏幕，如果您需要覆盖广泛的屏幕，那么您应该使用具有不同大小背景的媒体查询。

记得调整容器的padding-bottom 以及图像本身。

希望对你有帮助！

Answer 2

尝试将#main css 类中的高度和宽度替换为：

#main{
  height: 100%;
  width: 100%;
  background: url("http://i.imgur.com/G4gs6EG.png") no-repeat fixed center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

我已经在 codepen.io 上进行了这项工作

http://codepen.io/NosNits/pen/RRqzPy