Logobereich automatische Höhe

Hallo Franz,

schau mal hier:

Beitrag

RE: Logo Skalieren / Animieren

Danke, das funktioniert super! Allerdings habe ich beim Skalieren auf 60% oben nun zu viel Abstand zum Rand im Vergleich zu 100% - Kann man beim beim Verkleinern auch den Abstand oben zum Rand irgendwie festlegen oder das dieser gleich dem von 100% ist? Ich vermute es liegt an der Topline, hier kann den Nach Scrollen ebenfalls diese verkleinern, hier müsste sich das Logo dann mitanpassen, d.h. wenn die Topline bei Normal auf 180px steht und nach Scrollen auf 140px müsste man das Logo auch…

mksteinmetz

17. April 2023 um 22:51

Viele Grüße

Tom

Hallo Franzxaver

Eventuell könnte folgender Code funktionieren (nicht ausgetestet).

<style>
@media screen and (max-width: #val(mobileView)px) {
#logo img {
  width: 100%; /* oder konkreter Wert in px */
  height: 55px; /* oder kleinerer Wert in px */ }
}
</style>

Einfügen unter: Website -> Einstellungen > CSS (oder Strg + Umschalt + C).

Viel Erfolg und viele Grüsse
elch

Hallo Franz

Dann müsstest Du width: 100%; durch einen konkreten Wert in px ersetzen. Den Wert errechnest Du anhand der Originalgrösse des Logos im Verhältnis zur gewünschten Höhe.

Viele Grüsse

elch

Hallo zusammen,

ich hänge mich hier mal an.... Ich habe mit dem o.g. CSS das Logo in der mobilen Ansicht vorerst auf 80% gestellt, weil es mir dort zu groß war. Evtl. mache ich es noch etwas kleiner. Die Logogröße passt jetzt, allerdings ist es nach links gewandert Richtung Menü. Wie kann ich das rechtsbündig fixieren? Ich habe leider in verschiedenen anderen Themen nichts gefunden. Danke für Eure Hilfe!

Projekt vorerst: http://www.webcorner.de/CWC

Viele Grüße

Gerhard

Salut Gerhard L.

Bei konkreten bzw. absoluten Werten in px scheint es in Deinem Projekt korrekt zu funktionieren. Zum Beispiel:

@media screen and (max-width: 1023px) {
  #logo img {
    width: 115px;
    height: 70px;
  }
}

(Vielleicht gäbe es auch noch eine elegantere Lösung, denn beim Verkleinern des „Bildschirms“ wird das Logo irgendwann zusammengestaucht.)

Viel Erfolg und gute Tage.
Ciao
elch

Hallo zusammen,

hier ein CSS-Code, der das Logo mobil auf die Topline skaliert und nach rechts schiebt:

/* Greift nur in der mobilen Ansicht (ab der definierten Zeta-Schwelle) */
media screen and (max-width: #val(mobileView)px) {

/* Styling für das eigentliche Logobild */
#logo img {
height: 45px; /* Feste Höhe: etwas kleiner als die 55px Topline für etwas Luft */
width: auto; /* Berechnet die Breite automatisch – verhindert das Verzerrung */
max-width: 100%; /* Verhindert, dass das Bild über den Bildschirm hinausragt */
object-fit: contain; /* Behält das Seitenverhältnis sauber bei */
float: right; /* Schiebt das Logo direkt an den rechten Rand */
}

}

Das ganze liegt hier bei height:45px; in Kombination mit width: auto; und object-fit: contain;. Dadurch rechnet der Browser die Breite anhand des ursprünglichen Seitenverhältnisses selbst aus. Das Logo bleibt im Rahmen der Topline und verzerrt nicht mehr. Durch text-align: right; beim übergeordneten #logo rutscht es zudem wie gewünscht nach rechts.

Gruß

Armin (aws)

Guten Abend Elch,

danke für Deinen Beitrag. Die Größe funktioniert mit dem CSS-Schnipsel perfekt, 80 %, 70 %, 60 %, aber das Logo ist in der mobilen Ansicht nicht mehr rechtsbündig. Die rechte Seite des Logos müsste dort sein, wo die rechte Seite des darunterliegenden Header-Bildes ist. Ich suche mal weiter....

Viele Grüße!

Gerhard

Hallo Gerhard,

ergänze mal Dein CSS-Schnipsel um ein

margin-right: -35px

Vieleicht muss Du mit dem Wert noch etwas experimentieren, aber mit -35px sah es in meinem Test eigentlich rechtsbündig aus oder zumindest merklich besser.

Viele Grüße

Tom

Guten Morgen Tom,

danke für Deinen Beitrag. Ich habe heute früh kurz mit ChatGPT diskutiert. Der Knackpunkt ist die Trennung von Größe Logobereich - der muss 100 % bleiben - und Größe Logo, das kann ich skalieren. Ich bin beim Logo jetzt bei 60%, so sieht's perfekt aus. Hier der Codeschnipsel:

<style> media screen and (max-width: #val(mobileView)px) { #logo { width: 100%; text-align: right; } #logo img { width: 80%; height: 80%; margin-left: auto; margin-right: 0; } } </style>

Bricht hier beim reinkopieren leider nicht so um wie es soll, aber ich glaube, Du erkennst, das gemeint ist. So passt es bei meiner Seite.

Viele Grüße!

Gerhard

Hallo Gerhard,

mein Vorschlag war, dem rechten Rand (margin-right) einen Wert von -35px statt von gegenwärtig 0 zu geben:

<style> 
media screen and (max-width: #val(mobileView)px) { 
#logo { 
width: 100%; 
text-align: right; 
} 
#logo img { 
width: 80%; 
height: 80%; 
margin-left: auto; 
margin-right: 0; 
} 
} 
</style>

Tipp: Wenn Du hier mehrzeiligen Code einfügst, ihn anschließend markierst und dann die fünfte Schaltfläche von rechts (Code-Block einfügen) klickst, dann wird der Code korrekt umgebrochen.

Viele Grüße

Tom

Danke nochmal an alle, die sich Gedanken gemacht haben!

Ich lasse das jetzt mal so drin, wie ich's heute früh gemacht habe. Logobereich 100 % und rechts, Logogröße selbst prozentual variabel. Ich habe jetzt 60 % und es passt super.

Viele Grüße!

Gerhard