響應式背景圖像 - 逐漸調整大小/重新縮放

是否有可能我可以逐漸重新調整背景圖像。響應式背景圖像 - 逐漸調整大小/重新縮放

目前，媒體查詢迫使它在某個階段從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

響應式背景圖像 - 逐漸調整大小/重新縮放

回答

相關問題