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

20 außergewöhnliche Möbel Designs für Ihre Inspiration

20 außergewöhnliche Möbel Designs für Ihre Inspiration

Moderne Möbeldesigner tendieren dazu, lebendige, multifunktionale und platzsparende Möbelstücke zu schaffen , die sich auch leicht in etwas anderes verwandeln lassen. Zum Beispiel ein Bett, das je nach Bedarf in ein Sofa, einen Stuhl oder einen Hocker verwandelt werden kann.Wir sind eine Generation, die es liebt, Zeit und Raum zu maximieren. W

(Tech- und Design-Tipps)

Die heißesten Web-Anwendungen des Monats - Mai

Die heißesten Web-Anwendungen des Monats - Mai

2011 ist wie das Jahr der Renaissance für das Web. Jeden Monat werden mehr und mehr großartige Web-Anwendungen veröffentlicht - im Web, Mac, Windows, Android, Sie nennen es! Dies ist wahrscheinlich gut, da Sie mehr Werkzeuge und Auswahlmöglichkeiten haben, aber mit Hunderten und Hunderten neuer Apps wird es ziemlich schwer für Sie sein, den wirklich guten zu benutzen.Um I

(Tech- und Design-Tipps)