+- MyBB.de Forum (https://www.mybb.de/forum)
+-- Forum: Anpassungen (https://www.mybb.de/forum/forum-47.html)
+--- Forum: Theme-Diskussionen (https://www.mybb.de/forum/forum-84.html)
+--- Thema: Grafiken unterschiedlicher Größe einbinden (/thread-36901.html)
Grafiken unterschiedlicher Größe einbinden - falcao1010 - 30.12.2019
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
RE: Grafiken unterschiedlicher Größe einbinden - falcao1010 - 30.12.2019
Ich denke es sieht jetzt ganz gut aus.
RE: Grafiken unterschiedlicher Größe einbinden - Schnapsnase - 02.01.2020
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.
RE: Grafiken unterschiedlicher Größe einbinden - falcao1010 - 02.01.2020
Interessant. Welche Tipps hast Du denn ganz konkret, um dies zu lösen? Mittelfristig kommen wohl noch ein paar Grafiken dazu...
RE: Grafiken unterschiedlicher Größe einbinden - Schnapsnase - 02.01.2020
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.
RE: Grafiken unterschiedlicher Größe einbinden - falcao1010 - 04.01.2020
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".
RE: Grafiken unterschiedlicher Größe einbinden - falcao1010 - 09.01.2020
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.
RE: Grafiken unterschiedlicher Größe einbinden - SvePu - 09.01.2020
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;
}RE: Grafiken unterschiedlicher Größe einbinden - falcao1010 - 09.01.2020
Perfekt, vielen Dank!
RE: Grafiken unterschiedlicher Größe einbinden - SvePu - 09.01.2020
Gerne