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

时间:2017-10-14 23:50:49

标签: html css image

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

1 个答案:

答案 0 :(得分:0)

尝试使用

img{
    width: 100%;

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

    // or viewwidth
    width: 100vw;
}