|
|||
Skalierbare Hintergrundbilder
Hi Community,
ich beisse mir gerade an einer Denksportaufgabe seit Stunden die Zähne aus. Vielleicht hat hier jemand im Forum eine Lösung. Die Aufgabe besteht darin eine Webseite mit einem formatfüllenden und skalierbaren Hintergrundbild auszustatten. Ich meine also, dass das bild kleiner oder größer wird, wenn das Browserfenster sich in der Größe ändert. OK, das ist ja im Grunde nicht soooo schwer. Knifflig wird es erst, wenn man davon ausgeht, dass es Hochformate und zur Ansicht gibt. Ein Querformat-Hintergrundbild läßt sich nun mal im hochformatigen Browserfenster schwer darstellen, ohne dass ein Rand entsteht. Und genau das ist das Problem. OK, aber auch das ist lösbar. Ich nehme einfach drei Hintergrundbilder: Eines für extreme Hochformate, eines für annähernd quadratische Formate und eines für extreme Querformate. Jetzt teile ich im nächsten Schritt die Bilder den Browserfenstern zu. Beim Querformat lasse ich das mittlere und das annähernd quadratische weg und beim Hochformat umgekehrt. In CSS sieht das dann so aus: Code:
@media screen and (min-aspect-ratio: 5/3) { .foto-hoch, .foto-start {display: none;}} @media screen and (max-aspect-ratio: 3/5) { .foto-start-breit, .foto-start, {display: none;}} @media screen and (min-aspect-ratio: 5/3) and (min-aspect-ratio: 5/3){ .foto-start-hoch, .foto-start-breit {display: none;}} 1) Breiter als extremes Querformat ist problemlos zu definieren. 2) Höher als extremes Hochformat ist auch problemlos zu definieren. Aber wie definiere ich den Teil zwichen den beiden Formaten? Also den annähernd quadratischen Teil. Wenn hier irgendjemand eine Idee hat oder eine Lösung in CSS bzw. einen Link wäre ich froh. Denn wie gesagt: Ich bastle seit Stunden ohne relevantem Ergebnis. Entweder werden mehrere Bilder übereinander angezeigt (per z-index) oder eine der Ebenen wird gar nicht dargestellt. Danke für Tipps! Raphael |
Sponsored Links |
|
|||
Du kannst es mal mit folgendem Code probieren:
html { height: 100%; background-attachment: fixed; background-clip: border-box; background-color: transparent; background-origin: padding-box; background-position: center center; background-repeat: no-repeat; background-size: cover; background-image: url(bild.jpg); } Ich denke, dass das damit auch bei Hochkantbildern klappt, also dass sie auf das gesamte Browserfenster skaliert werden (auch wenn es dann komisch aussieht). |
Sponsored Links |
|
|||
Hi dazzle89,
danke für die Idee, aber das beantwortet nicht ganz meine Frage. Mein Problem ist dass ich die beiden Möglichkeiten von max-aspect-ratio bzw. min-aspect-ratio durcheinanderbringe. Um die Frage auf den wesentlichen Kern zu kürzen: 1) Ich habe 3 verschiedene Zustände des Browserfensters und drei Bilder. Wie bringe ich die per aspect-ratio zusammen: In Worten: 1) Extremes Querformat{ Bild hoch, Bild mittel {display: none;}} 2) Extremes Hochformat{ Bild quer, Bild mittel {display: none;}} 3) annähernd quadratisch{ Bild hoch, Bild quer {display: none;}} Soweit ist es einfach. Aber in CSS? 1) @media screen and (max-aspect-ratio: 3/5) {Bild hoch, Bild mittel {display: none;}} 2) @media screen and (min-aspect-ratio: 5/3) { Bild quer, Bild mittel {display: none;}} 3) ??? Ist das jetzt verwirrend? |
|
|||
Hey, danke! Das sieht schon mal super aus.
Vielleicht können wir das auch prinzipiell klären. 3/5 ist quer (?) 5/3 ist hoch (?) max-aspect-ratio 3/5 ist also quer oder noch extremer. min-aspect-ratio: 5/3 ist hoch oder extrem hoch. Und die Verknüpfung ( (min-aspect-ratio: 3/5) and (max-aspect-ratio: 5/3) ) deckt den Bereich dazwischen ab. Wenn das alles stimmt, dann hab ichs kapiert. Danke! |
|
||||
Eselsbrücke: Ein 16:9-Fernseher hat einen Breitbildschirm, daran kannst Du Dir merken, dass immer der Wert zuerst genannt wird, der die Breite repräsentiert.
Bei 5/3 ist ebenfalls der erste Wert höher, also ist das Querformat. Bei 3/5 ist es umgekehrt, es ist also Hochformat. 1/1 wäre exakt quadratisch. Diese Verhältnisse ergeben ja auch immer eine konkrete Zahl, z.B. 3 geteilt durch 5 ergibt 0,6. Und desto höher diese Zahl ist, desto "querer" ist das Format (1 wäre quadratisch.) Und daraus ergeben sich letztlich auch die genannten media queries: Alles bis 0,6 ist hoch, alles von 0,6 bis 1,6667 ist (nahezu) quadratisch, und alles ab 1,6667 ist quer.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten. Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.) Geändert von heiko_rs (08.11.2013 um 14:57 Uhr) |
|
|||
Zitat:
Raphael |
|
|||
Apect Ratio gibt das Verhältnis von Breite zu Höhe an.
Der Quotient ist das Ergebnis daraus. Ist derQuotient grösser als 1 spricht man vom Querformat, ist er kleiner als 1 Hochkantformat. Ein Aspect Ratio von 3/5 ist also Hochkant, der Quotient daraus ist 0,6 Ein Aspect Ratio von 5/3 ist demnach Querformat, der Quotient daraus 1,6666... Ist das Seitenverhältnis gleich ist der Quotient immer 1. Beispiel: 600/600 = 1, also quadratisch 800/600 = 1,33333 also Querformat 600/800 = 0,75 also Hochkant EDIT: uups, zu spät.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..." Aus einem Forum. Geändert von explanator (08.11.2013 um 15:11 Uhr) |
|
|||
Nö, klappt immer noch nicht ganz. vielleicht ist das Janze auch nicht lösbar.
Hier erst mal der Link zur Seite im ersten Entwurf. - Kerstin Das Porträt sollte bei verschiedenen Browserausschnitten annähernd gleich positioniert sein. Denn ich will dann in die Seite verschiedene Stilelemente einfügen. Und wenn dann ein Button über dem Auge ist, weil der Ausschnitt eben gerade mal mal so oder so ist, siehts einfach total dumm aus. Und dann ist noch das Problem mit den extremen Hochformaten. Da siehts auch lausig aus. Meine Gedanken zur Verbesserung gehen in zwei Richtungen: 1) Am CSS für die einzelnen Klassen rumschrauben. Das wäre derzeit so: Code:
.interfoto {position: absolute; z-index:1; top: 0px; left: 0; width: 100%; min-height: 900px; height: 100%; overflow: hidden; } .scale {position: relative; z-index:2; width: 100%; height: 100%; background: #5E620E; overflow: hidden; } Vielleicht gibts da irgendwo im Web einen fertigen Codeschnipsel. Ich bin doch nicht der erste, der ein skalierbares Porträit auf der Startseite haben möchte. Gefunden habe ich über google leider nichts, was mein Problem lösen könnte. Vielleicht wars auch die falsche Suchabfrage. Danke schon mal vorab! Raphael [EDIT] Hab doch was gefunden. http://kimili.com/journal/the-flexib...nd-image-redux Ich werde das aber erst später ausprobieren. Nachdem ich hier gepostet habe und um Hilfe gefragt habe, mag ich nicht gleich kurze Zeit später die gesamte Seite umbauen. Aber dieser Ansatz ist grundsätzlich anders und ist vielleicht besser geeignet mein Problem zu klären. [/EDIT] Geändert von RaBo (08.11.2013 um 15:43 Uhr) |
Sponsored Links |
|
||||
Das liegt wahrscheinlich an den verschachtelten MediaQueries css - Is it possible to embed Media Queries within Media Queries? - Stack Overflow
|
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
CSS, kaskadierte DIVs, Hintergrundbilder | Markus1234 | CSS | 6 | 21.04.2013 20:05 |
Externes Stylesheet zeigt keine Hintergrundbilder! | Wolowizard | CSS | 2 | 07.10.2011 21:52 |
zwei hintergrundbilder? | pino.bonbon | CSS | 9 | 15.01.2009 19:31 |
Hintergrundbilder hover'n mit IE | Jug | CSS | 7 | 04.08.2006 17:26 |
IE zeigt Hintergrundbild(er) nicht ganz an... | nueffl | CSS | 5 | 30.06.2006 12:19 |