Brennpunkt Intelligentes Zuschneiden von responsiven Bildern

Die Praxis, responsive Bilder zu implementieren, steckt noch in den Kinderschuhen. Wir haben viele Ideen und Vorschläge gesehen, wie dies geschehen soll, und wir werden sicherlich noch viel mehr sehen.

Heute betrachten wir ein faszinierendes kleines Rahmenwerk, mit dem Sie Ihre Bilder nicht nur automatisch ändern können, wenn sich das Ansichtsfenster ändert, sondern auch die Bilder mit einem bestimmten wichtigen Fokus ausschneiden. Erstaunlicherweise tut dies alles mit reinem CSS. Lesen Sie weiter, um zu sehen, wie es funktioniert.

Treffpunkt treffen

Focal Point ist ein GitHub-Projekt und ein von Adam Bradley erstelltes CSS-Framework. Wie Sie wissen, erfordert das Konzept der responsiven Bilder, dass die Größe und der Reflow aller Bilder auf Ihrer Seite geändert werden, um ein optimales Layout für die aktuelle Größe des Ansichtsfensters zu erreichen. Focal Point führt diese Idee jedoch noch einen Schritt weiter und ändert nicht nur die Größe Ihrer Bilder, sondern beschneidet sie auch.

Das Problem bei dieser Idee ist natürlich, dass wenn Sie ein Bild willkürlich beschneiden, der wichtigste Teil des Bildes herausgeschnitten wird! Im obigen Bild befindet sich das Motiv beispielsweise auf der rechten Seite des Bildes. Wie verhindern wir, dass sie abgeschnitten wird?

Glücklicherweise können Sie mit dem Fokuspunkt einen Zielbereich des Bildes angeben, der beibehalten werden soll (Fokuspunkt). Auf diese Weise wird das Bild so beschnitten, dass das Bild so beschnitten wird, dass es immer noch gut aussieht.

Wie funktioniert es?

Die Implementierung von Focal Point ist ein ziemlich einzigartiger Prozess, aber es ist ziemlich einfach. Zuerst sprechen wir über den allgemeinen Prozess, der zur Auswahl eines Brennpunkts verwendet wird, und tauchen dann in den Code ein.

Wenn Sie mit Focal Point ein Bild in Ihre Webseite einfügen, wird dieses Bild automatisch in ein unsichtbares 12-12-Raster aufgeteilt. Es spielt keine Rolle, wie groß die Bilder sind, das Raster passt sich an Ihre Bedürfnisse an.

Nun, da wir wissen, wie das Bild aufgeteilt ist, müssen wir uns für einen bestimmten Ort in diesem Raster entscheiden, der als Schwerpunkt dienen soll. Dies bedeutet, dass der von uns gewählte Punkt beim Beschneiden des Bildes als zentraler Bereich dient, um den herum der Zuschnitt erfolgen wird. Wenn wir also das Gesicht des Mannes wählen, können wir sicherstellen, dass die wichtigen Aspekte dieses Fotos erhalten bleiben.

Der Prozess hier ist, das Gesicht zu finden und dann die Gittereinheiten von der Mitte aus zu zählen. In diesem Fall ist sein Gesicht drei Einheiten rechts und drei Einheiten von der Mitte des Gitters entfernt.

Der Code

Nun, da wir uns auf unseren Fokus konzentrieren, ist es an der Zeit, unseren Code auszuarbeiten. Laden Sie zunächst das Projekt von GitHub herunter und verknüpfen Sie die enthaltene CSS-Datei mit Ihrem HTML-Dokument.

Sobald Sie alles eingerichtet haben, können Sie zwei Divs und ein Image-Tag einrichten. Ja, ich weiß, das ist eine Menge von Markup für ein einzelnes Bild und definitiv ein großer Nachteil bei der Verwendung dieses Rahmens. Hier ist das grundlegende Markup:

<img src="//lesptitesaffairesdemayl.be/img/images_1/focal-point-intelligent-cropping-of-responsive-images_5.jpg"> <p>Wenn dieser Code angewendet wird, fängt unser Bild auf großen Bildschirmen normal an. Wenn der Ansichtsbereich verkleinert wird, nimmt die Breite jedoch allmählich ab, wenn sich der Ausschnitt um unseren Brennpunkt herum verengt. </p> <img src="//lesptitesaffairesdemayl.be/img/images_1/focal-point-intelligent-cropping-of-responsive-images_6.jpg"> <p>Beachten Sie, dass das Bild auf der rechten Seite nicht nur kleinere, sondern unwichtige Teile des Fotos sind. Diese Magie ist live mit CSS passiert! Um eine bessere Vorstellung davon zu bekommen, wie dies in einem Projekt funktioniert, erstellen wir eine grundlegende Seite. </p> <h2>Baue es</h2> <p>Das erste, was wir tun werden, ist ein div mit einer Klasse von "column" einzurichten:</p> <textarea wrap="soft" readonly="">

Einfach genug, richtig? Jetzt fügen wir eine Überschrift und einen Absatz hinzu, nur für einige allgemeine Seiteninhalte.

<h1>Mittelpunkt</h1> <p>Lorem ipsum? </p>

Als Nächstes werfen Sie das Bild genauso wie oben mit der? Rechten-3? und? up-3? Klassen und zwei Divs.

<h1>Mittelpunkt</h1> <p>Lorem ipsum? </p> <img src="//lesptitesaffairesdemayl.be/img/images_1/focal-point-intelligent-cropping-of-responsive-images_7.jpg"> <h3>CSS</h3> <p>Nun ist es Zeit, diese Seite zu gestalten. Das Tolle daran ist, dass die Reaktionsfähigkeit der Bilder sowie der Fokuspunkt Voodoo für uns alle wichtig sind. Alles, was wir tun müssen, ist, dass alles schön aussieht. Der Prozess, den ich hier durchführe, teilt die Seite im Wesentlichen in zwei Spalten auf und formatiert den Text.</p> <textarea wrap="soft" readonly=""> * {Marge: 0; Polsterung: 0; -webkit-box-dimensionierung: border-box; -moz-box-dimensionierung: border-box; -ms-box-dimensionierung: border-box; Box-Dimensionierung: Border-Box; } .column {float: left; Überlauf: Auto; Polsterung: 20px; Breite: 50%; } h1 {text-transform: Großbuchstaben; Schriftart: fett 45px / 1,5 Helvetica, Verdana, serifenlos; } p {margin-bottom: 20px; Farbe: # 888; Schrift: 14px / 1,5 Helvetica, Verdana, serifenlos; } @media all und (max-width: 767px) {p {Schriftgröße: 12px; } h1 {font-size: 35px; }} @media all und (max-Breite: 550px) {h1 {Schriftgröße: 23px; }}

Sehen Sie es in Aktion

Nun, da unsere Demo erstellt ist, werfen wir einen Blick darauf. Betrachten wir die Seite auf einem Desktop- oder Laptop-Computer, sehen wir, dass die Bilder automatisch unserer Spaltengröße entsprechen und den gesamten Bildbereich anzeigen.

Demo: Klicken Sie hier, um zu starten.

Wenn wir nun entweder unsere Fenstergröße einschränken oder zu einem mobilen Gerät wechseln, können wir sehen, dass sich die Bilder perfekt anpassen. Wenn wir kleiner und kleiner werden, tritt eine Medienabfrage ein und plötzlich werden die Bilder nicht nur kleiner, sondern auch abgeschnitten.

Wie cool ist das aus gestalterischer Sicht? Je kleiner ein Bild wird, desto leichter wird es, wenn ein früher großer, prominenter Fokuspunkt zu einem winzigen Fleck wird. Mit diesem Framework können Sie sicherstellen, dass Betrachter auf kleinen Geräten weiterhin Bilder mit hoher Wirkung erhalten.

Browser-Kompatibilität

Dies sollte in allen gängigen, modernen Browsern funktionieren. Für IE8 wird die Größe der Bilder korrekt geändert, sie werden einfach nicht selbst zugeschnitten. Dies ist nicht wirklich das Ende der Welt, da 99,99% der Websites im Internet diese Funktion zum automatischen Zuschneiden ohnehin nicht haben!

Cool, aber wie funktioniert das?

Jetzt wissen wir, dass Focal Point funktioniert, aber es ist wichtig zu wissen Wie Es klappt.Auf diese Weise können Sie ohne das Framework etwas optimieren oder etwas ähnliches tun, ohne dass Sie Probleme haben.

Der erste Teil des Codes ist eine grundlegende, auf CSS basierende, responsive Bildlösung. Es wäre gut, dies mit etwas JavaScript zu unterstützen, aber es ist ein solider Anfang. Wie Sie sehen, nutzt es 100% Breite, 100% Max-Breite und automatische Höhe, um seine Magie zu entfalten.

Brennpunkt {Breite: 100%; Höhe: Auto; Überlauf versteckt; } .focal-Punkt img {width: 100%; Max-Breite: 100%; Höhe: Auto; -ms-Interpolationsmodus: bikubisch; } .focal-Punkt div {position: relativ; Max-Breite: keine; Höhe: Auto; }

Was als nächstes passiert, ist etwas komplizierter. Zunächst wird eine grundlegende Medienabfrage bei 767px implementiert. Um den Zuschnitt durchzuführen, werden für jede der möglichen Klassen einige negative Ränder verwendet. Ich habe diesen Code so aufgeräumt, dass er nur die "up-3" enthält. und? rechts-3? Klassen, die wir oben verwendet haben.

@media all und (max-width: 767px) {/ * 4x3 Landscape Shape (Standard) * / .focal-point div {margin: -3em -4em; } / * Landscape up (Total 6em) * / .up-3 div {margin-top: -1.5em; Rand unten: -4,5 em; } .right-3 div {margin-left: -6em; Rand rechts: -2em; }}

Wie Sie sehen, gibt es hier eigentlich nicht viel Code, aber es ist ein ziemlich kniffliger Teil von CSS. Negative Ränder werden für em-Einheiten verwendet, um das Bild relativ zu einem bestimmten Punkt zuzuschneiden. Ein ernstes Lob an Adam Bradley für das Nachdenken über diese clevere Technik!

Was denkst du?

Nun, da Sie gesehen haben, was Focal Point macht und wie es funktioniert, ist es Zeit für Sie, sich einzuloggen und mir mitzuteilen, was Sie denken. Würden Sie das in einem Projekt verwenden? Warum oder warum nicht? Wie würdest du es noch besser machen?

Wenn Sie auch andere großartige reaktionsschnelle Bildwerkzeuge, Techniken oder Frameworks gesehen haben, lassen Sie einen Link und ich werde sie überprüfen.