zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Skalierbare Hintergrundbilder

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 08.11.2013, 04:54
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 21.09.2008
Ort: Berlin
Beiträge: 124
RaBo befindet sich auf einem aufstrebenden Ast
Standard 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;}}
Ich habe mehrere Varianten durchprobiert. Das Ergebnis ist immer das selbe:
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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 08.11.2013, 11:32
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 02.01.2012
Beiträge: 487
dazzle89 wird schon bald berühmt werden
Standard

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).
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 08.11.2013, 13:52
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 21.09.2008
Ort: Berlin
Beiträge: 124
RaBo befindet sich auf einem aufstrebenden Ast
Standard

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?
Mit Zitat antworten
  #4 (permalink)  
Alt 08.11.2013, 14:07
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Probiere mal etwas wie:

(max-aspect-ratio: 3/5)
(min-aspect-ratio: 3/5) and (max-aspect-ratio: 5/3)
(min-aspect-ratio: 5/3)

Das geht von hoch über (nahezu) quadratisch zu 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.)
Mit Zitat antworten
  #5 (permalink)  
Alt 08.11.2013, 14:39
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 21.09.2008
Ort: Berlin
Beiträge: 124
RaBo befindet sich auf einem aufstrebenden Ast
Standard

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!
Mit Zitat antworten
  #6 (permalink)  
Alt 08.11.2013, 14:55
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

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)
Mit Zitat antworten
  #7 (permalink)  
Alt 08.11.2013, 15:03
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 21.09.2008
Ort: Berlin
Beiträge: 124
RaBo befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von heiko_rs Beitrag anzeigen
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.
OK, das ist hilfreich. Danke!
Raphael
Mit Zitat antworten
  #8 (permalink)  
Alt 08.11.2013, 15:09
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

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)
Mit Zitat antworten
  #9 (permalink)  
Alt 08.11.2013, 15:36
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 21.09.2008
Ort: Berlin
Beiträge: 124
RaBo befindet sich auf einem aufstrebenden Ast
Standard

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; }
2) die Fenstergrößen noch genauer einzelnen Bildern zuordnen. Vorallen bei extremen Hochformaten (Typ Lesezeichen) siehts irgendwann mal total blöd aus. Da wäre dann das Bild im oberen Teil, die Navibuttons schwimmen irgendwo unten.


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)
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 08.11.2013, 15:48
Benutzerbild von cebito
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 18.07.2009
Ort: Dresden
Beiträge: 688
cebito sorgt für eine eindrucksvolle Atmosphärecebito sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von RaBo Beitrag anzeigen
Nö, klappt immer noch nicht ganz.
Das liegt wahrscheinlich an den verschachtelten MediaQueries css - Is it possible to embed Media Queries within Media Queries? - Stack Overflow
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 23:22 Uhr.