[falcao1010]

Hallo,

ich habe eine Frage, die nur am Rande mit Mybb zu tun hat: Ich möchte auf einer Seite Logos von Firmen nebeneinander darstellen.

Nun ist es so, dass Logos und Grafiken unterschiedlich groß sind. Dennoch sollen diese Logos ähnlich groß dargestellt werden, zumindest von der Höhe her. Das Ganze soll ferner noch responsiv sein...

Falls jemand Zeit und Lust für Tipps hat, wäre ich wie immer dankbar :-)

Hier ein Link zu der Seite, wo die Darstellung noch nicht funktioniert:
https://www.kommunalforum.de/Forum-Anbieterverzeichnis

[falcao1010]

Ich denke es sieht jetzt ganz gut aus.

[Schnapsnase]

Kleine Anmerkung dazu:
Das man via Media Queries Elemente mittels "display: none ;" entsprechend der Viewportgröße ausblendet ist gängige Praxis und völlig in Ordnung.
Bei Images solltest Du aber etwas Vorsicht walten lassen.
Beispiel: Du stellst 3, 4 oder nochmehr gleiche Images in verschiedener Größe bereit und blendest sie über Media Queries mit "display: none" aus. Der Browser läd beim Seitenaufbau trotzdem alle diese Bilder, obwohl es alles die gleichen sind und lt. Media-Query-Anweisung nur eins davon angezeigt wird.
Das geht je nach Größe der Images natürlich auf die Latenz und damit auf die Performance Deiner Seite.

Es gibt geschicktere Möglichkeiten, Images responsive zu gestalten.

[falcao1010]

Interessant. Welche Tipps hast Du denn ganz konkret, um dies zu lösen? Mittelfristig kommen wohl noch ein paar Grafiken dazu...

[Schnapsnase]

Eine recht gut funktionierende Lösung ist, die Images über CSS-Anweisung via "vh" und "vw" an den Viewport, oder via "%" an einen umfassenden Container anzupassen.
Das erspart Dir jegliche Media-Queries.

[falcao1010]

Danke, ich behalte das mal im Hinterkopf ;-)

Mittelfristig wäre es ideal, wenn man die Grafiken verschieben könnte. So wie beispielsweise unten auf der Seite stellenanzeigen.de die Rubrik "Beliebte Arbeitgeber".

[falcao1010]

Eine Frage habe ich noch zu der bestehenden "Media-Queries-Lösung": Wie kann ich die Grafiken (Logos) unterschiedlicher Größe nebeneinander in einer Reihe darstellen? Das heißt die Grafiken (Logos) sollen unten auf einer identischen Position beginnen (als ob man eine Linie ziehen würde). Momentan beginnt die niedrigere Grafik etwas weiter oben.

[SvePu]

Füge der CSS-Definition beider Klassen einfach ein "vertical-align: bottom;" hinzu.

Code:

.my_anbieter_innen {
  padding: 0px 8px 0px 8px;
  border: 0px solid #666666;
  vertical-align: bottom;
}

.my_anbieter_innen_b {
  padding: 0px 40px 0px 40px;
  border: 0px solid #666666;
  vertical-align: bottom;
}

[falcao1010]

Perfekt, vielen Dank!

[SvePu]

Gerne