Responsive Bilder leicht gemacht mit ResponsifyJS

Das moderne Web sollte 100% reaktionsschnell sein und neuere Bibliotheken machen dies zunehmend möglich.

Mit kostenlosen Plugins wie ResponsifyJS ist es noch einfacher, Ihre Websites auf allen Geräten zu nutzen. Dieses kostenlose jQuery-Plugin nimmt einen Container mit Bildern und ordnet sie basierend auf unterschiedlichen Bildschirmgrößen dynamisch neu an.

Da unterschiedliche Behälter Bilder unterschiedlich halten, können sie sich auf sehr seltsame Weise verändern. Manchmal haben Sie Fotos von Personen und ihre Gesichter können abgeschnitten werden, wenn Sie die Größe auf Mobilgeräten ändern.

Das Responsify-Plugin wurde erstellt, um dieses genaue Problem zu lösen. Es kann automatisch funktionieren, aber die wahre Magie liegt in der Definition Ihres eigenen Fokusbereichs auf dem Bild.

Es verwendet ein internes System von Dezimalbeschreibungen, um den Fokus des Bildes zu finden. Sie können beispielsweise Positionen definieren, z. B. data-focus-top der ein bestimmtes Bildsegment "blockiert".

Diese Daten müssen in Dezimalzahlen übergeben werden, z. B. eine Dezimalzahl von 0, 5 entspricht 50% des Bildes (links / rechts oder oben / unten). Das ist natürlich ziemlich verwirrend. Aber es gibt eine kostenlose Responsify-App, mit der Sie die Positionen dynamisch in Ihrem Browser berechnen können.

Laden Sie einfach ein Bild hoch, definieren Sie den Fokusbereich und kopieren Sie den Bildcode in Ihre Website. Das Responsify-Plugin enthält alle Daten, die es benötigt, um das Bild auf kleineren Bildschirmen richtig zu skalieren.

Im GitHub-Repo finden Sie einige Live-Demo-Links, einschließlich Code-Snippets zum Kopieren / Einfügen in Ihre Site.

Dieses Plugin ist nicht die perfekte Lösung für jedes Projekt. Manchmal möchten Sie, dass Bilder ohne feste Fokusbereiche skaliert werden. Aber wenn Sie mit jQuery gemauerte Grids verwenden, schadet es nicht, ResponsifyJS zu Ihrem Stack hinzuzufügen.

Um mehr zu erfahren, besuchen Sie die Plugin-Homepage für eine Live-Demo, einen Download-Link und eine vollständige Setup-Anleitung.