LOCAL Image Source ändert je nach Bildschirmgröße

Question

Ich mag ein Bild ändern, je nach Bildschirmgröße, ist das Bild eine gute Größe, wenn sie in Mobile Größe, aber wenn es Vollbild ist das Bild zu groß ist. Ich habe diese Frage in einer anderen Frage gestellt.

Es hat sich für eine URL gearbeitet, aber ich verstehe nicht, wie es für ein lokales Bild arbeiten zu machen. z.B. Img/

https://stackoverflow.com/a/43901756/7962671

Danke,

Luke

Answer 1

Wo ist Ihr Stylesheet zu Ihrem img Ordner relativ liegt Wenn Ihre Website-Verzeichnis wird die folgende Art und Weise gebaut:

-index.html

-/css

-/img

Dann sollten Sie Ihren Code, dies ändern:

@media screen and (max-width: 767px) { 
#main-img{ 
    background-image: url("../img/Well-Being-For-Kids.jpg"); 
} 
} 
@media screen and (min-width: 768px) {  
#main-img{  
    background-image: url("../img/Well-Being-For-Kids.jpg"); 
} 
}