So platzieren Sie große Bilder auf kleinem Raum einer Webseite

So platzieren Sie große Bilder auf kleinem Raum einer Webseite

Originalquelle: www.bamagazine.com

Enge Bereiche gibt es überall: Banner auf Webseiten, der Bereich um Nachrichtenüberschriften, Spaltenanzeigen. Ein Foto aus einer Kamera ist jedoch viel größer, mit einem typischen Maß von 6 x 4 Zoll. Wie gehen Sie mit der Beziehung der beiden um? In diesem Artikel stellen wir drei Lösungen vor.

1. Nachrichtentitel:

Wir möchten im Titelbereich ein großes Foto verwenden, was müssen wir tun?

1. Mutiger Schnitt:

Wenn die freie Fläche Ihres Fotos die gleiche Breite hat wie die Fläche auf die Sie es auftragen möchten, können wir einen fetten Schnitt auf dem Foto machen. Es mag für Sie faszinierend sein, dass ein kleines Foto die Essenz eines größeren Fotos vermitteln kann.

Wählen Sie den Brennpunkt Ihres Fotos und wenden Sie den Ausschnitt darauf an. Sie werden überrascht sein, aber je schmaler Sie schneiden, desto eindrucksvoller wirkt das Foto!

Allein beim Betrachten des Bildes oben können unsere Augen schnell eine Vielzahl von Informationen aufnehmen, darunter:

  • ihr Alter;
  • ihr Geschlecht;
  • ihre Haare;
  • ihre Kleidung;
  • Ihre Ausdrücke;
  • ihre Beziehung;

Und all das ist genau das, was wir brauchen!

Das zugeschnittene Bild wurde im Titel dieses Artikels über Altersversorgung verwendet. Der Effekt ist sehr gut, sogar besser als bei Verwendung des großen Originalbilds !

Vorherige Seite 1 2 3 Nächste Seite Mehr lesen

<<:  Tutorial zur Verwendung von Docker Compose zum Erstellen von Confluence

>>:  Grundsätze zur Auswahl von MySQL-Datentypen

Artikel empfehlen

Abfrage der Daten des Tages vor dem aktuellen Zeitintervall in MySQL

1. Hintergrund In tatsächlichen Projekten stoßen ...

Docker-Lösung zum Anmelden ohne Root-Rechte

Wenn Sie den Docker-Befehl zum ersten Mal verwend...

MySQL-String-Aufteilungsvorgang (String-Abfangen mit Trennzeichen)

String-Extraktion ohne Trennzeichen Fragenanforde...

So fügen Sie in JS eine Abbruchfunktion zu einem Versprechen hinzu

Inhaltsverzeichnis Überblick Promise Race Methode...

So blockieren und verbieten Sie Webcrawler im Nginx-Server

Jede Website stößt normalerweise auf viele Crawle...

Eine detaillierte Einführung in den netstat-Befehl in Linux

Inhaltsverzeichnis 1. Einleitung 2. Beschreibung ...

Vue-CLI - Aufzeichnung der Schritte zur mehrseitigen Verzeichnisverpackung

Seitenverzeichnisstruktur Beachten Sie, dass Sie ...

Eine kurze Analyse des Zeitproblems von MySQL

Der Standardzeittyp (Datum/Uhrzeit und Zeitstempe...

Nodejs-Plugin und Nutzungsübersicht

Die Betriebsumgebung dieses Tutorials: Windows 7-...

Vue implementiert einen einfachen Rechner

In diesem Artikelbeispiel wird der spezifische Co...

Eine kurze Diskussion über die MySQL-Optimierungslösung für große Tabellen

Hintergrund Die Menge neuer Daten in der Geschäft...