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

是否有可能我可以逐渐重新调整背景图像。响应式背景图像 - 逐渐调整大小/重新缩放

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

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

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

来源

2015-11-24 michaelmcgurk

您可以使用百分比所以100％的高度会留在是每个能得到 –

谢谢。你可以用我的例子告诉我如何做到这一点？它必须从900px开始，在移动设备上才能达到300px，但如果可能的话，我希望剩下的只是变化。 – michaelmcgurk

它需要是一个CSS背景图像，或者你可以使用''标签吗？ –

你可以做这样的事情：

.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。

来源

2015-11-24 10:27:14 Ionut

试试这个：

.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>

来源

2015-11-24 10:28:15

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

回答

相关问题