如何在媒体上创建全屏背景图像？

这是来自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

如何在媒体上创建全屏背景图像？

回答

相关问题