Laden Sie ein Bild nur für Mobilgerät

Question

Ich möchte wissen, ob es für meine Startseite möglich ist, ein Bild nur für mobile Benutzer zu laden. Ich weiß, dass es mit Javascript möglich ist, aber ich möchte wissen, ob ich dasselbe nur mit CSS erreichen kann. Ich habe versucht zu recherchieren, kann aber nicht finden, wonach ich suche. Ich meine nicht die Größe des Bildes basierend auf der Bildschirmgröße, sondern das Laden eines für Mobilgeräte optimierten Bildes.

Answer 1

Ja, das ist möglich. Sie können Media Querys verwenden. Beispiel CSS:

#yourimage { 
    display: none; 
} 

@media (max-width: 500px) { 
    #yourimage { 
     display: block; 
    } 
} 

Dieser Code ist für HTML-Bilder tho. Hier ist ein JSFiddle:

https://jsfiddle.net/vqfLokpa/

Drücken Sie einfach laufen und dann das Browserfenster kleiner zu machen beginnen.

Answer 2

Sie können Medienabfragen verwenden, um Klassen abhängig von der Bildschirmgröße anzuwenden.

#img { 
    display: none; 
} 

/* Large Devices, Wide Screens */ 
    @media only screen and (max-width : 1200px) { 

} 

/* Medium Devices, Desktops */ 
@media only screen and (max-width : 992px) { 

} 

/* Small Devices, Tablets */ 
@media only screen and (max-width : 768px) { 

} 

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) { 
    #img{ 
    display: block; 
    } 

} 

/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) { 

} 

Answer 3

Nutzen Sie media querybackground-image bei verschiedenen screen resolutions wie unten zu ändern,

div{ 
 
    width:100%; 
 
    height:400px; 
 
    background:url('http://placehold.it/350x150/f22/fff'); 
 
    background-size:100% 100%; 
 
} 
 
@media screen and (max-width : 480px){ 
 
div{ 
 
    background:url('http://placehold.it/480x150/f12/fff'); 
 
    background-size:100% 100%; 
 
} 
 
} 
 
@media screen and (max-width : 320px){ 
 
div{ 
 
    background:url('http://placehold.it/320x150/e12/fff'); 
 
    background-size:100% 100%; 
 
} 
 
}

<div></div>

prüfen diese jsFiddle.

Answer 4

Basierend auf Ihrem Kommentar zu @NullDev müssen Sie ein Div in der entsprechenden Größe erstellen und das Bild als Hintergrundbild auf ein Element anwenden, um zu bestimmen, was über CSS geladen wird.

Zum Beispiel:

HTML:

<div id="image"></div> 

CSS:

#image { 
    position: relative; 
    width: 400px; 
    height: 400px; 
    background-image:url('/path/to/image'); 
    background-size: cover; 
    background-repeat: no-repeat; 
} 

dann die Medienabfrage gelten:

@media only screen and (max-width : 480px) { 
    #image{ 
    background-image:url('/path/to/mobile/image'); 
    } 
} 

Ich hoffe, das hilft.