Bildgröße (responsive slider)

Question

Ich benutze die responsive http://bxslider.com/ auf meiner Website. Das Problem ist, dass ich große Bilder mit einer großen Dateigröße habe und wenn ich meine Website auf einem mobilen Gerät ansehen möchte, ist es zu alt, um sie zu laden.

Der bxslider arbeitet mit img-tags in html und ich suche einen Weg, dass der Browser maby entscheidet welche Images Version er zB groß, mittel oder klein wählt.

Ich weiß, wie es für divs in css zum Beispiel mit Medienanfragen funktionieren wird, aber ich weiß nicht, wie es mit Bildern in html.

Irgendwelche Vorschläge?

Sorry, für mein Englisch: P

Answer 1

Für die ansprechenden Bilder, die wir max-width setzen haben: 100% zu Image-Tag. und das äußere div oder welches Element kann die Breite festlegen. Es kann mit css media query rewright der Gerätebreite angepasst werden.

Answer 2

Verwenden Sie das Bild, das Sie für mobile Benutzer anzeigen möchten, im src-Attribut Ihres Bilds und legen Sie das Bild mit einer besseren Auflösung in einem anderen Attribut fest (z. B.).

Wenn der Benutzer einen Desktop-PC verwendet (z. B. Dokumentbreite über 600 Pixel), ersetzen Sie die Bildquelle durch die im Attribut data-fullsize angegebene Quelle. Dazu können Sie JavaScript oder jQuery verwenden. Sie könnten ein weiteres Attribut hinzufügen, um den Pfad für das Image für mobile Benutzer vorübergehend auf Reaktionsfähigkeit zu sichern (wenn Sie die Dokumentbreite ändern, ohne die Seite auf eine kleinere Größe zu laden).