Responsive Bilder leicht gemacht mit ResponsifyJS

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

Mit kostenlosen Plugins, wie z ResponsifyJS, Es ist noch einfacher, Ihre Websites auf allen Geräten zum Laufen zu bringen. Diese kostenloses jQuery-Plugin nimmt einen Container mit Bildern und ordnet sie dynamisch neu an basierend auf unterschiedlichen Bildschirmgrößen.

Da verschiedene Behälter Bilder anders halten, Sie können auf sehr seltsame Weise ihre Größe ändern. Manchmal haben Sie Fotos von Personen, deren Gesichter bei der Größenänderung auf dem Handy abgeschnitten werden können.

Das Responsify-Plugin wurde erstellt, um genau dieses Problem zu lösen. Es kann automatisch funktionieren, aber die wahre Magie liegt darin Definieren Sie Ihren eigenen Fokusbereich auf dem Bild.

Es verwendet ein internes System von Dezimalbeschreibungen um herauszufinden, wo der Fokus des Bildes liegen soll. Zum Beispiel können Sie Positionen definieren sowie Datenfokus-Top welche “Blöcke in” ein bestimmtes Bildsegment.

Diese Daten müssen weitergegeben werden in Form von Dezimalzahlen, eine Dezimalstelle von .5 zielt auf 50% des Bildes (links / rechts oder oben / unten). Natürlich ist das ziemlich verwirrend, wenn Sie es selbst tun. Aber es gibt eine Kostenlose Responsify-App das lässt dich Berechnen Sie die Positionen dynamisch in Ihrem Browser.

Laden Sie einfach ein Bild hoch, definieren Sie den Fokusbereich und kopieren Sie den Bildcode in Ihre Website. Das Responsify-Plugin verfügt über alle erforderlichen Daten, um das Bild auf kleineren Bildschirmen richtig zu skalieren.

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

Dieses Plugin ist nicht die perfekte Lösung für jedes Projekt. Manchmal wirst du wollen Bilder, deren Größe ohne festen Fokusbereich geändert werden soll. Aber wenn Sie verwenden Mauerwerk mit jQuery Es tut nicht weh, ResponsifyJS zu Ihrem Stack hinzuzufügen.

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