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

Vier Kategorien von CSS-Selektoren: Basis, Kombination, Attribut, Pseudoklasse

Was ist ein Selektor? Die Rolle des Selektors bes...

Beispiele für neue Selektoren in CSS3

Struktureller (Position) Pseudoklassenselektor (C...

Implementierung eines einfachen Altersrechners auf Basis von HTML+JS

Inhaltsverzeichnis Vorwort Demonstrationseffekt H...

Tiefgreifendes Verständnis des Linux-Lastausgleichs LVS

Inhaltsverzeichnis 1. LVS-Lastausgleich 2. Grundl...

So konfigurieren Sie https für Nginx in Docker

Websites ohne https-Unterstützung werden von Brow...

Die normale Methode der MySQL-Deadlock-Prüfungsverarbeitung

Normalerweise wird bei einem Deadlock die Verbind...

Rhit effiziente Visualisierung Nginx-Protokollanzeigetool

Inhaltsverzeichnis Einführung Installieren Anzeig...

Lösung für das Problem, dass sich der mysql8.0.11-Client nicht anmelden kann

In diesem Artikel erfahren Sie, wie Sie das Probl...