[3.3] WE_universal Header Grafik automatisch skalieren lassen via CSS

[DocSommer]

Moinsen,

hat zufällig jemand von Euch auch diesen Style in Verwendung oder etwas mehr Peilung in Sachen CSS als ich? Ich habe mir mit meinem Halbwissen und den Browser Analysetool und diversen Versuchen das CSS zu frisieren leider die Zähne ausgebissen. Ich bastel gerade an einem neuen Forum und es geht darum die Kopfgrafik einzubetten. Die Breite der Darstellung des Forum ist auf 1280px begrenzt und folgende Grafik für den Kopfbereich erstellt mit 1280x322px:

https://halstenbek.net/styles/we_univer ... hboard.png

Mein Wunsch ist, dass sich diese Grafik bei einer Änderung der Fenstergröße oder am Mobilgerät "passend skaliert" und nicht abgeschnitten dargestellt wird, was leider der Fall gewesen ist. Ich habe die common.css jetzt soweit erfolgreich frisiert, dass eine gewisse Skalierung stattfindet, siehe:

https://halstenbek.net/index.php?forumportal_bypass=1

Code: Alles auswählen

.inventea-dashboard {
	position: relative;
	min-height: auto;
	background: url("./images/dashboard.png") no-repeat;
	background-size: contain;
}

Leider arbeitet aber noch etwas "dagegen" - ich vermute es hängt mit dem Bereich/Element zusammen, auf dem die Grafik liegt, das sieht man ganz gut, wenn man das Fenster so schmal macht, dass man die Responsive Ansicht ausreizt. Der "dunkle" Balken verhält sich sowohl bei der Desktop als auch Responsive irgendwie statisch.

Liegt die Lösung vielleicht an einer Änderung an dieser Stelle?

Code: Alles auswählen

.inventea-header {
	width: 100%;
	background: var(--inventea-header);
}

Für andere Baustellen habe ich schon Lösungen gefunden, z.B. Dark Mode funktionsunfähig machen (Toggle Switch wird noch entfernt).

[Talk19zehn]

Hallo DocSommer,

bitte versuche ggf. jenes CSS: Test

Code: Alles auswählen

.inventea-dashboard {
	position: relative;
	min-height: 320px;
	background: url("./images/dashboard.png") center center no-repeat;
	background-size: contain;
}

Ohne Gewähr, da ich lediglich im Browsertool FF in der Kürze meiner Zeit jenes o.g. CSS probehalber auf deiner Seite vollzogen habe. Weitere "Abhängigkeiten" konnte ich aus diesem Grunde nicht durchspielen. Deine verwendete phpBB-Version im Zusammenhang jenes Styles und Anpassungen sind in Folge meinerseits nicht abgeglichen.

Grüße

Edit:
====
Auf phpBB-com fand ich lediglich die Version für phpBB 3.3.11:
https://www.phpbb.com/customise/db/style/we_universal/
Gefunden habe ich auf Github eine Version für phpBB-Version 3.3.15:
https://github.com/nextgen-solutions-gt/we_universal

[DocSommer]

Danke für den Tip, leider wirkt das min-height der Intention entgegen, dass sich die Grafik nicht abschneiden soll.

Ich habe eben mal mit Google Gemini rumgebastelt. Als zusätzlichen Wunsch habe ich jetzt zwei unterschiedliche Kopfgrafiken für Responsive und Desktop angegeben und das Thema mit der Skalierung. Zu 90% bin ich schon zufrieden - wenn man das Browserfenster kleiner macht, erstreckt sich die Kopfgrafik noch etwas über das angedachte Layout hinaus. Das kann ich mir notfalls aber auch als Special Effect verkaufen

Den folgenden Code hat sich Gemini ausgedacht. Bei Aspect Ratio muss man nur die Auflösung der Grafiken eingeben.

Code: Alles auswählen

/* ==========================================================================
   DYNAMISCH SKALIERENDER RESPONSIVE HEADER
   ========================================================================== */

/* Hintergrund-Überhang des Elternelements eliminieren */
.inventea-header {
    background: transparent !important;
    height: auto !important;
    min-height: 0 !important;
}

/* 1. Desktop-Ansicht (Standard ab 701px) */
.inventea-dashboard {
    background-image: url("./images/dashboard_desktop.png") !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
    background-size: 100% auto !important;
    
    /* Berechnet die Höhe dynamisch anhand des echten Bildformats (Breite / Höhe) */
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1280 / 206 !important; 
    min-height: 0 !important;
    padding: 0 !important;
}

/* 2. Mobile Ansicht (Smartphones bis 700px) */
@media screen and (max-width: 700px) {
    .inventea-dashboard {
        background-image: url("./images/dashboard_mobile.png") !important;
        /* Nutzt das quadratischere Format des Mobil-Banners */
        aspect-ratio: 1280 / 332 !important; 
    }
}

/* 3. Schaltflächen & Steuerelemente sichtbar halten */
.inventea-dashboard .inventea-sitename,
.inventea-dashboard .inventea-search,
.inventea-dashboard .inventea-menu {
    display: block !important;
    visibility: visible !important;
}