使用動態背景圖像構建響應式div

Question

我正在使用名爲Hugo（用GO編寫）的靜態頁面構建器來構建網站，後者可動態地獲取背景圖像。我使用bootstrap v3作爲基本主題。

<div style="background-image: url('{{ .path-to-dynamic-file }}');"> 

我需要爲圖片加載較小的圖片版本。我將在cms中創建一個額外的字段以吸引移動圖像。但是我不能通過css來引用文件，因爲當選擇新圖像時，路徑將會改變。我寧願不製作重複的div，因爲裏面有文字內容。

是我唯一的選擇基於Java腳本的圖像交換或有一種古怪的技術，我錯過了。這一定是一個非常普遍的要求，所以我想有興趣聽聽人們對此的處理方法。

Answer 1

你可以在css聲明中使用media屬性。請參閱此鏈接：

HTML media Attribute

Answer 2

<div class="dyna-bg-img"></div> 
<style> 
.dyna-bg-img{ 
background: rgba(0,0,0,0) url('{{ .path-to-dynamic-file-for-desktop }}') no-repeat center center; 
} 
@media all and (max-width: 500px) { 
.dyna-bg-img{ 
background-image: url('{{ .path-to-dynamic-file-for-mobile }}'); 
} 
} 
</style> 

首先，不渲染任何標記圖像嵌入。創建「樣式」標籤並在您的佈局中調用您的圖像。這段代碼將減少「！important」的使用。這將像魅力一樣工作！

Answer 3

在使用HTML文件中的風格標籤我的情況下，解決了我的要求：

<style> 
     .hero-long { 
     background-image: url('{{ .Params.media_item_2.api_object.fields.file.url }}'); 
     } 

     @media (min-width: 768px) { 
     .hero-long { 
      background-image: url('{{ .Params.media_item.api_object.fields.file.url }}'); 
     } 
     } 

</style>