#header mit Bild und automatischer Höhe?

[lumpidumpi]

Hallo,

ich versuche gerade einen #header der über die ganze Breite geht so anzupassen, dass sich die Höhe des #header proportional mit dem verändert.

Dabei geht das #header Element über die ganze Breite allerdings ist die Höhe nicht flexibel. Auch mit auto als Eigenschaft oder 100% funktioniert es nicht.

Ich habe schon backstretch via jquery eingepasst und die Höhe vom Bild ausgelesen um sie dann in den Container via .css zu schreiben, das funktioniert soweit, dass ich den #header anpassen kann aber das img im #header bleibt ohne Höhenveränderung.

Es gibt ja Webseiten, wo das funktioniert, dass das Header-Bild proportional mit skaliert wird? Wie kann ich das erreichen?

 

[dn3d_fanboy]

Ohne einen Link zur betreffenden Seite, bzw. den Code sehen zu können (jsfiddle), wird das schwer bis unmöglich, dir da zu helfen.

 

[lumpidumpi]

Guten morgen,

nun der Code ist recht simpel:

<header id="header">
<img src="bild.jpg" alt="" />
</header>

 

[owieortho]

Es gibt ja Webseiten, wo das funktioniert, dass das Header-Bild proportional mit skaliert wird? Wie kann ich das erreichen?

...dann wäre doch der erste Ansatz den Quellcode dieser Seiten zu begutachten, die Seiten gegebenenfalls nachzubauen und dann Stück für Stück zu reduzieren und mit eigenen Inhalten zu ersetzen.

Am Rande bemerkt: Du bist äußerst spasam mit Deinen Informationen. Keine Links zu den Seiten, wo es funktioniert, Dein "Code" ist auch nur ein HTML-Schnipsel, aus dem nicht ersichtlich ist, wie und wo dieser im gesamten HTML der Seite verortet ist. CSS und JS zu den angezeigten tags und ids bzw. der umgebenden Elemente fehlen. Da bleibt nur Wahrsagen oder im Trüben Fischen.

O.

 

[lumpidumpi]

Das Problem ist ich habe die Seite nicht im Web.

<header id="header">
            <div class="container headerContainer content">
                <div class="jumbotron text-center text-sm-center text-md-center">
                    <h1 class="display-4">Hello, world!</h1>
                    <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
                </div>
                <!-- End Jumbotron -->
            </div>
            <!-- End Container -->
        </header>

und CSS ist das jetzt hier:

#header {
    margin-top: 50px;
    background: url(./images/favpic.jpg) 0 0 no-repeat;
    background-size:cover;
    height: -webkit-fill-available;
    min-height: -moz-available;
    height: stretch;
    height: 100%;
}

Ich war ja nicht untätig. Lediglich auf Firefox funktioniert das ganze nicht. Ansonsten habe ich das schon in Opera und Chrome hinbekommen.

Deswegen habe ich jetzt eigentlich nur die Frage: warum funktioniert das nicht

min-height: -moz-available;

?

 

[Dudlhofer]

min-height: -moz-available;

Wo hast Du die Variable -moz-available denn her? Die ist selbst Google gänzlich unbekannt. Kann es sein, dass Du die von einer Seite übernommen hast, die LESS oder irgendeinen anderen CSS_Preprozessor verwendet?

 

[lumpidumpi]

Nö, die Variablen stehen hier https://developer.mozilla.org/de/docs/Web/CSS/height und wurden hier auch genutzt: https://stackoverflow.com/questions...bkit-fill-available-in-one-width-css-property

Mit Webkit funktioniert das problemlos. Allerdings nicht in Firefox, das ist schon krass.

 

[Myhar]

min-height: -moz-available;

Wo hast Du die Variable -moz-available denn her? Die ist selbst Google gänzlich unbekannt. Kann es sein, dass Du die von einer Seite übernommen hast, die LESS oder irgendeinen anderen CSS_Preprozessor verwendet?

Du hast wohl nach -moz-available gesucht. Hier ist zu erwähnen dass google bei Suchbegriffen die mit - anfangen Seiten angibt wo die Wörter nicht vorkommen. Funktioniert nur in Kombination mit anderen Wörtern, sucht man also nur nach einem Suchbegriff der mit - anfängt findet er natürlich nichts. Da muss man nach "-moz-available" (man beachte die Anführungszeichen) suchen, dann findet google auch genug Inhalte.
Auch ist - keine Variablenbezeichnung für CSS Preprozessoren sondern deutet immer auf browser präfixe hin. Aber das nur am Rande als Info warum hier nichts gefunden wurde.

Allerdings nicht in Firefox, das ist schon krass.

Krass ist auch dass du keine Infos zu den Seiten lieferst wo "es ja funktioniert" .
Ich bin mir hier zu 99% sicher dass es sich dabei um etwas mit "max-width: 100%" (die img-responsive Klasse von bootstrap) handelt, aber ohne es zu sehen kann ich da nicht weiterhelfen.
Auf der Seite die du verlinkt hast steht auch: "This is an experimental API that should not be used in production code."
Also besser nicht verwenden.

 

[lumpidumpi]

Also ich habe jetzt das gefunden: https://stackoverflow.com/questions/55133385/moz-available-height-not-working-in-firefox

Das hat mir jetzt weitergeholfen und mein Problem gelöst Der Container wird jetzt auch wie in Webkit-Browser in der Höhe voll aufgezogen und zeigt das Hintergrundbild vollständig an.

Krass ist auch dass du keine Infos zu den Seiten lieferst wo "es ja funktioniert" .
Ich bin mir hier zu 99% sicher dass es sich dabei um etwas mit "max-width: 100%" (die img-responsive Klasse von bootstrap) handelt, aber ohne es zu sehen kann ich da nicht weiterhelfen.
Auf der Seite die du verlinkt hast steht auch: "This is an experimental API that should not be used in production code."
Also besser nicht verwenden.

Das Problem ist eine Seite die ich in html bastle. Das irgendwie im Web verfügbar zu machen ist mir zu kompliziert mit den Freigaben usw.

Das Problem zuletzt ist ja insofern auch von der Beschreibung ganz simpel. Ohne das da HTML nötig ist. Kennt jemand einen Grund dafür, dass -moz-available nicht funktioniert? Auch anfänglich wollte ich ja eigentlich nur wissen, wie ich es hinbekomme einen Container, mit einem Hintergrundbild (war anfangs falsch) auf volle Größe zu bekommen?

Gruß an Euch und Danke!

 

[Myhar]

Vorneweg einmal: Ich lese da also heraus dass du das Problem lösen konntest? Das ist ja wirklich gut

Das Problem ist eine Seite die ich in html bastle. Das irgendwie im Web verfügbar zu machen ist mir zu kompliziert mit den Freigaben usw.

Ein kurzer Punkt noch dazu: In der zweiten Antwort wurdest du auf jsfiddle aufmerksam gemacht, aber leider ohne Link. Das ist genau dafür da, da kannst du dein HTML + CSS posten ohne dir über so was Gedanken machen zu müssen. Ohne Code kann man nämlich wirklich nur schwer, bzw. oft gar nicht helfen.
Beim nächsten Mal verwendest du das am besten gleich in der Frage damit wiruns ein Bild von deinem von deinem Problem machen können. Und bitte nicht den gesamten HTML+CSS Code dort reinkopieren sondern wirklich nur den Teil der für eine Frage relevant ist.

 

[lumpidumpi]

Vorneweg einmal: Ich lese da also heraus dass du das Problem lösen konntest? Das ist ja wirklich gut



Ein kurzer Punkt noch dazu: In der zweiten Antwort wurdest du auf jsfiddle aufmerksam gemacht, aber leider ohne Link. Das ist genau dafür da, da kannst du dein HTML + CSS posten ohne dir über so was Gedanken machen zu müssen. Ohne Code kann man nämlich wirklich nur schwer, bzw. oft gar nicht helfen.
Beim nächsten Mal verwendest du das am besten gleich in der Frage damit wiruns ein Bild von deinem von deinem Problem machen können. Und bitte nicht den gesamten HTML+CSS Code dort reinkopieren sondern wirklich nur den Teil der für eine Frage relevant ist.

Schon klar, das Ferndiagnosen schwer sind. Mal sehen.