2017-10-14 2 views
0

Dies ist Code aus einem Jekyll-Blog, aber ich verwende CSS aus einer externen CSS-Datei, um sein Styling zu bestimmen. Wie kann ich das folgende Bild zu einem vollständigen Hintergrundbild machen, wie es bei Medium Posts der Fall ist?Wie erstelle ich ein Fullscreen-Hintergrundbild wie auf einem Medium?

Der Code ist für diese [Webseite] [1] und die Bilder in der Post.

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">

+0

verwenden meinen Sie Vollbild wie das gesamte Browserfenster füllen? – TheRuler

+0

Ja. So: https://howwegettonext.com/inception-the-avian-flu-outbreak-in-hong-kong-1997-5c0de48f6781 –

+0

können Sie versuchen, css Körper {Höhe: 100%; Hintergrundbild: URL ("img .jpg "); Hintergrundgröße: Cover; } – TheRuler

Antwort

0

Try

img{ 
    width: 100%; 

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

    // or viewwidth 
    width: 100vw; 
} 
Verwandte Themen