Banner immer Zentrieren ("Mobil machen")

[Jxnasa]

Guten Tag,

ich habe auf meiner Website neue Banner eingefügt (es sollte dynamischer und lebhafter aussehen) allerdings waren davor Banner drin wo es kein Problem war, wenn diese etwas abgeschnitten waren... jetzt allerdings schon.
Und auf dem Handy geht die Ansicht der Website durch die neuen Banner überhaupt nicht...

Auf der Website: https://www.qvg-esports.eu könnt ihr euch einen besseren Überblick verschaffen (allerdings nicht auf der Startseite als Beispiel hierfür gilt der Reiter: "Teams")
Ich hätte gern, dass der Banner immer Zentriert ist und die Schrift immer zu erkennen ist ob auf Handy oder am PC. Sprich dass der Banner nicht abgeschnitten wird sondern entweder verkleinert oder vergrößert (doof gesagt).

Die Banner haben eine Abmessung von 1920x400

Beste Dank im vorraus

 

[Sempervivum]

dass der Banner nicht abgeschnitten wird sondern entweder verkleinert oder vergrößert (doof gesagt).

Das ist ganz schwierig zu erreichen, wenn dieser Banner ein Hintergrundbild ist und man auch Leerräume vermeiden will, aber nicht allzu schwer, wenn er durch ein img-Tag angezeigt wird.
Ich habe dazu mal eine einfache Demo gemacht:
https://jsfiddle.net/Sempervivum/37nwvqcr/2/
Als ich damit fast fertig war, habe ich erst bemerkt, dass die Zeile mit der Navigation ja sticky ist und beim Scrollen von oben her eingleitet. Wenn Du das beibehalten willst, musst Du die Nav wahrscheinlich doch aus dem Header heraus nehmen und fixed oder sticky positionieren. Versuche es mal auf diese Weise und frage, wenn Du nicht zum Ziel kommst.

 

[Jxnasa]

@Sempervivum
Okay ich bin dafür leider zu doof ich weiß zwar wie du es in etwas gemeint hast aber die Umsetzung fällt mir generell sehr schwer.... trotzdem danke