Bilder auf eine einheitliche Auflösung bringen

ScottB

Cadet 3rd Year
Registriert
Apr. 2022
Beiträge
35
Hallo allerseits,

ich möchte eine Beispiel-Webseite erstellen, die wie in diesem Beispiel 6 Bilder in einem Flexbox-Layout anordnet. Ich habe mir dazu 6 Beispiel-Bilder aus dem Internet heruntergeladen (creative commons). Die Bilder haben unterschiedliche Auflösungen. Ich möchte die Auflösung aller Bilder einheitlich auf 348 x 225 Pixel setzen, ohne dass irgendeinbild dabei gestaucht oder gestreckt wird. Also würde ich mit Gimp die Bilder entsprechend der Auflösung zurechtschneiden.

Kennt jemand eine andere schnellere Lösung?

Vielen Dank
 
Wenn die Bilder das gleiche Format haben (z.B. 16x9) dann kannst du auch einfach skalieren.
 
Die 6 Bilder wären in der Zwischenzeit schon längst (manuell)zugeschnitten.
 
  • Gefällt mir
Reaktionen: porenbeton, User007 und netzgestaltung
Je nach Auflösung des Bildes könnte bei der Automatisierung Müll raus kommen wenn ein zu großer falscher Bereich weggeschnitten wird.

Da würde ich mir lieber in einem Bildbearbeitungsprogramm eine Vorlage machen und manuell den richtigen Bereich auswählen. Das dauert dann eben pro Bild 10 Sekunden ...
 
  • Gefällt mir
Reaktionen: ScottB
Danke für die Antworten. Ich habe mich für die Lösung von @SpamBot entschieden und in Gimp die auf den richtigen bereich zugeschnitten.
 
Ich hab in diversen WP Installationen schon verschiedene Plugins mit unterschiedlichen Ansätzen dazu gesehen. (Sind ja nicht immer nur 6 Bilder oder 1 Benutzer)

Entweder setzt man bei Bilder "focuspoints" und der Rest geschieht automatisiert (das muß die software so können), oder man bekommt eine Maske zum Bild und setzt den Ausschnittrahmen fest - Da ist der Unterschied zu Gimp nur, dass es sonst keine Funktionen gibt und die Ausschnittgröße festgesetzt ist.
 
Das geht alles per CSS only, dafür muss man nicht mal eine Grafikprogramm anschmeißen.

Hier mal paar CSS Denkanstöße: object-fit, object-position, width, height, aspect-ratio ....

Unabhängig davon sollte man natürlich auf die Datei-/Bildergröße, Ladezeiten, Lazy-Loading usw. achten :)
 
Zuletzt bearbeitet:
Zurück
Oben