de.hideout-lastation.com
Paradies Für Designer Und Entwickler


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

5 besten Echtzeit-Webanalyse-Tools (2018)

5 besten Echtzeit-Webanalyse-Tools (2018)

Wenn Sie eine Website besitzen, können Sie viel über Ihre Besucher und deren Verhalten auf Ihrer Website durch Webanalyse erfahren . Zu diesem Zweck gibt es Web-Analyse-Tools. Sie können bestimmte Open-Source-Webanalyse-Optionen finden und dann gibt es das berühmte Google Analytics.Je tiefer Sie jedoch in das Web-Geschäft einsteigen, desto schärfer sind die Statistiken, die Sie auf Ihrer Website benötigen - und von scharfen, ich meine Echtzeit-Analysen. Also,

(Tech- und Design-Tipps)

21 kostenlose Hi-Res Visitenkarten-Mockups

21 kostenlose Hi-Res Visitenkarten-Mockups

Die Visitenkarte ist eine der besten Möglichkeiten, einen Eindruck bei einem neuen Kunden oder Arbeitgeber zu hinterlassen. Aber in der digitalen Welt kann die physische Visitenkarte nicht einfach übergeben werden. Hier kommen Visitenkartenvorlagen wie die in diesem Beitrag gezeigten.Diese Vorlagen und Modelle sind frei zu verwenden und haben Elemente (wie Textur und Farbe), die einfach zu bearbeiten sind.

(Tech- und Design-Tipps)