Wie man HTML5 benutzt Element, um Responsive Image zu erreichen

Responsive Design kann hier bleiben, aber es gibt viele Probleme, die angesprochen werden müssen, wenn es darum geht, Bilder ansprechbar zu machen . Obwohl reaktionsfähige Bilder sich automatisch an der Größe des Darstellungsfeldes anpassen (was technisch einfach ist), besteht ein Problem für den Benutzer darin, dass der Bildstimmpunkt kaum sichtbar wird, wenn das Bild zu klein wird .

Der ideale Konsens unter Web-Entwicklern ist, dass die tatsächliche Dimension auch reagieren sollte . Der Browser sollte in der Lage sein, kleinere oder größere Bilder entsprechend der Größe des Darstellungsbereichs zu laden. Auf diese Weise können wir das beste Bildverhältnis und nicht das geschrumpfte Bild (wie gezeigt) steuern und liefern.

Hier kommt das HTML5- picture Spiel. Das picture ermöglicht es uns, mehrere Bildquellen zur Verfügung zu stellen und die Zustellung über Media Queries zu steuern. Obwohl es noch keinen Browser gibt, der dieses Element implementiert, können wir dafür einen Polyfill namens Picturefill verwenden. Mal sehen, wie es geht, sollen wir?

Anfangen

Picturefill ist eine JavaScript-Bibliothek, die von der Filament Group entwickelt wurde. Es erlaubt uns, das Bildelement jetzt zu verwenden. Laden Sie das Skript im Github-Repository herunter und legen Sie die picturefill.js oder picturefill.min.js . Picurefill ist eine eigenständige JavaScript-Bibliothek, die keine andere Bibliothek benötigt. Sie können es einfach in das head Tag einfügen.

Das Bild

Ich habe ein Bild in drei verschiedenen Dimensionen wie folgt vorbereitet. Das Bild wurde zugeschnitten, um den Fokus auf die Person im Bild zu bewahren. Der Plan hier ist, dass wir die kleinste Größe in kleinen Bildschirmen und das größere Bild in großen Bildschirmen zeigen.

Bildelement verwenden

Picturefill kann auf zwei Arten funktionieren: Wir können srcset in das img Tag einbetten oder das picture verwenden. Hier werden wir uns für das picture, da es überschaubarer, leichter zu verstehen und lesbarer ist.

Ähnlich wie video und audio werden mehrere source, die auf die Bildquelle verweisen, wie folgt umgebrochen.

Das Quellelement wird, wie Sie aus dem obigen Codefragment sehen können, mit dem Medienattribut festgelegt. In diesem Attribut geben wir den Viewport-Breakpoint an, auf dem das Bild dargestellt werden soll. Sie können den Effekt sofort sehen.

Sehen Sie sich die Demoseite an und ändern Sie die Größe des Darstellungsbereichs. Sie sollten das Bild innerhalb der angegebenen Darstellungsfeldbreite finden.

Bilderfüllung für WordPress

Wenn Sie WordPress verwenden, können Sie ein Plugin namens Picturefill.WP verwenden, mit dem Sie das Bildelement ohne Probleme in WordPress implementieren können. Lade einfach dein Bild hoch und bette es wie gewohnt ein, und dieses Plugin kümmert sich um den Rest.

Letzter Gedanke

Das Bildelement ist eine großartige Ergänzung in HTML5. Wir haben mehr Kontrolle über die Bildgröße und -größe, die der Browser darstellen sollte. Und mit picturefill können wir dieses neue Element jetzt verwenden, obwohl es noch kein Browser implementiert hat. Picturefill funktioniert in einer Vielzahl von Browsern einschließlich IE (wenn auch mit ein paar Einschränkungen).

Zuletzt, sieh dir die Demo an und lade den Quellcode herunter.

• Demo
• Quelle herunterladen

Erste Schritte mit Gulp.js

Gulp ist ein Javascript-basiertes Tool, mit dem Sie Teile Ihres Workflows automatisieren können. Automatisierung kann Sie buchstäblich Stunden am Tag sparen. Ob Sie ein Entwickler oder ein Designer sind, der ab und zu HTML-Wireframes erstellt, ich ermutige Sie, sich einzuarbeiten.In diesem Artikel werden wir die Grundlagen der Verwendung von Gulp betrachten - von der Installation bis zur grundlegenden Syntax und ein paar Beispiele.

(Tech- und Design-Tipps)

10 nützliche Instagram Tipps & Tricks, die Sie wissen sollten

Die beliebte Foto-Sharing-App Instagram hat viele Änderungen erfahren, zuletzt mit dem Instagram-Video. Wenn sich mehr Nutzer anmelden und mehr Apps erstellt werden, wird es definitiv mehr Änderungen geben. Um mit diesen Änderungen Schritt zu halten, brauchen wir einige Zeit. Deshalb haben wir 10 Tipps und Tricks gesammelt, die Sie auf Instagram nützlich finden können .Möch

(Tech- und Design-Tipps)