selfhtml.de - Alles für den Webmaster!

 

Empfehlung:

wix.com

Kostenlose Homepage

Besuchen Sie auch:

Jobs:

Re: Traffic vermindern

Autor: T.Jung
Datum: 20.04.2013 15:43:46

Vorab: Eine gute Lösung habe ich auch nicht gefunden.
Aber der Reihe nach...


> > AFAIK kann man mit Media Queries "nur" CSS
> > "manipulieren".
>
> So ist auch mein Kenntnisstand.

Ist auch richtig.

Zudem bringt es nichts, die media queries so wie Du einzusetzen: Bei einer bestimmten Viewport-Size 'display:block' und bei einer anderen 'display:none:' zu setzen.
Der Browser lädt nämlich trotzdem _alle_ Größen, siehe in den »Seiteninformationen« von Firefox:
http://www.tobiasjung.net/storage/firefox-seiteninformationen.jpg



> > Wenn Du mit
> > Hintergrundbildern arbeiten würdest (was dann
> > natürlich eigentlich nicht semantisch korrekt
> > wäre), kannst Du es mit Media Queries
> > versuchen.
>
> Manchmal heiligt der Zweck die Mittel.

Richtig.
Zudem finde ich: Ein Bild ist ein dekoratives Element, und ob ich das jetzt als img-Element oder Hintergrundbild einfüge, ist _mir_ ziemlich schnuppe.


> An Hintergrundbilder habe ich auch schon gedacht,
> aber dann hätte ich kein gleichmäßiges Skalieren
> der Biulder, sondern "Stufen", wenn ich mit Media
> Queries die Hintergrundbilder auswechsele.

Du kannst ja beides miteinander verbinden, da zumindest die CSS_3_-Syntax auch das Skalieren von Hintergrundbildern erlaubt.
Aber wie gesagt, eine perfekte Lösung habe auch ich nicht gefunden.

Schritt 1:
http://www.tobiasjung.net/storage/manya-picscale-1.html
Hier skalieren sich die Bildboxen zwar schön in der Breite, aber in der Höhe bleiben sie gleich, nämlich zu klein. Weil ihnen eine height-Angabe fehlt UND sie auch keinen Inhalt haben, anhand dessen sie sich skalieren könnten. Zudem wird die Größenänderung in meinem Firefox 19 super-langsam, öffensichtlich bereitet ihm das 'background-size:contain;' in Verbindung mit der fehlenden Höhenangabe echte Probleme. (Im Safari hingegen tritt dieses Problem nicht auf.)

Schritt 2, nur testweise:
http://www.tobiasjung.net/storage/manya-picscale-2.html
... der gleiche Code, aber diesmal mit fester Höhenangabe. Hier kann ich das Firefox-Fenster in gewohnter Geschwindigkeit skalieren, aber die feste Höhe ist ja nun mal nicht der gewünschte Effekt.

Wie kann ich den Browser also dazu bringen, die Box sowohl in der Breite, als auch in der Höhe korrekt anzupassen?
Tja, da ist mir leider nur etwas wirklich schmutziges eingefallen:

Schritt 3:
http://www.tobiasjung.net/storage/manya-picscale-3.html
Hier habe ich nun ein transparentes GIF eingefügt, welches in der Größe der größten Grafik aus Deinem Beispiel entspricht: Somit hat die Bildbox einen Inhalt und wird auch in der Höhe angepasst. Das ist natürlich, wie schon gesagt, nun wirklich nicht sauber.
Zudem funktioniert das »so richtig« auch nur dann, wenn das mittlere und das kleine Bild wenigstens die gleichen Seitenverhältnisse haben wie das große -- und das ist in Deinem Beispiel schon mal nicht der Fall.

Vielleicht fällt irgendjemanden ja etwas ein, wie man dieses Weg noch verbessern könnte...

Gruß,
Tobias


Beiträge

Antwort schreiben

Username: Usernamen registrieren
Passwort: Passwort vergessen?
Thema:
  Bitte benutze für deinen Beitrag die Groß-/Kleinschreibung!
Beitrag:
Link (URL):
Titel für Link:
Grafik (URL):
  Die Breite der Grafik darf 468 Pixel nicht überschreiten.
 
E-Mail-Benachrichtigung:



Zum Abschicken deines Beitrags bitte die Schaltfläche "Abschicken" nur einmal anklicken und warten. Der Server braucht manchmal einige Zeit, bis er den Beitrag in die Datenbank übernommen hat. Wenn du die Schaltfläche mehrmals drückst, erscheint dein Beitrag auch mehrmals im Forum.

Bewerten Sie Ihren Webhosting-Provider

Webhosting Provider bewerten und Apple iPad gewinnenWie zufrieden sind Sie mit Ihrem Webhosting-Provider? Gibt es Probleme beim Service, mit der Performance oder der Abrechnung?

Teilen Sie jetzt Ihre Erfahrungen mit anderen Webmastern und schreiben Sie eine Provider-Bewertung. Mit etwas Glück können Sie ein Apple iPad gewinnen!

Weitere Informationen und Teilnahme...