如何在媒體上創建全屏背景圖像？

這是來自jekyll博客的代碼，但我使用來自外部CSS文件的CSS來確定其樣式。如何讓以下圖像變成完整背景圖像，如中等貼圖上的圖像？如何在媒體上創建全屏背景圖像？

該代碼是爲此[網頁] [1]和圖像中的帖子。

HTML

img { 
 
    max-width: 100%; 
 
    font-style: italic; 
 
    vertical-align: middle; 
 
    border: 0; 
 
}

<p><img src="http://tanaka.co.zw/images/posts/fowlplague.gif" alt="Fowl plague"></p> 
 

 
<p>This article has left me most thoughtful about my present and future. It and other readings I will cite at the bottom will examine an issue of interest to me, and perhaps to all of us in many ways. Share your thoughts with me. 
 
    
 
Outbreak: Our Next Global Pandemic 
 
In May of 1997, a boy in Hong Kong is diagnosed with a new form of influenza- H5- he was dead within days. Within months, the Chinese government had ordered the slaughter of 1.2 million birds to curb the spread of the outbreak. 
 
Epidemics and pandemics have historically been the greatest existential dangers our species has faced. We spend trillions on defense but [war and violence](https://ourworldindata.org/slides/war-and-violence/#/title-slide) has really killed just 167 million to 188 million in the last century.</p> 
 

 
<img src="http://tanaka.co.zw/images/posts/democracy.png" alt="The History of Conflict">

來源

2017-10-14 Tanaka Chingonzo

你的意思是像充滿整個瀏覽器窗口全屏？ – TheRuler

是的。像這樣：https://howwegettonext.com/inception-the-avian-flu-outbreak-in-hong-kong-1997-5c0de48f6781 –

你可以試試css body {height：100％; background-image：url（「img .JPG「）;背景大小：蓋; } – TheRuler

嘗試使用

img{ 
    width: 100%; 

    // or min-width 
    min-width:100%; 

    // or viewwidth 
    width: 100vw; 
}

來源

2017-10-15 04:20:15 williamsi

如何在媒體上創建全屏背景圖像？

回答

相關問題