响应式背景图像 - 逐渐调整大小/重新缩放

Question

我是否可以逐步重新调整我的背景图像。

目前，媒体查询迫使它在某个阶段从900px跳到300px高度。我该如何逐步这样做？

associated type

Python 2.7.6 within IPython 3.2.1

Any

Answer 1

您可以这样做：

.hero {
    background:url('http://placehold.it/1400x900') center center no-repeat;
    background-size:cover;
    height:900px;
}

@media only screen and (max-width: 420px) {
    .hero {
           height: 300px;
           background-size: 100% auto;
    }
}

<div class="hero">
</div>

小提琴here。

Answer 2

试试这个：

.container {
    height:900px;
}

.hero {
    background:url('http://placehold.it/1400x900') center center no-repeat;
    background-size: 100% auto;
    height: 100%;
}

<div class="container">
  <div class="hero">
  </div>
</div>