|
|||
Quelle?
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..." Aus einem Forum. |
Sponsored Links |
|
|||
Den Link habe ich mir angesehen, nur ist mir der Zusammenhang zu meiner ursprünglichen Frage nicht so ganz klar.
|
|
|||
Ich habe hier mal ein Beispiel gemacht und es muss wohl was mit dem Cache zu tun haben.
Edit this Fiddle - jsFiddle Wenn man das im Chrome aufruft und hinter dem Bild eine andere Zahlenkombination einfügt (damit es nicht im Cache ist) sieht man den Effekt, das der graue Bereich nach oben springt. Ändert man erneut die Zahl und löscht height:auto aus dem CSS tritt dieses Springen nicht auf. |
|
|||
Ok, Ich versuche dir das mal ein wenig klar zu machen was Apple den Entwicklern da auf dem Weg gibt.
man soll nicht die Bilder automatisch skalieren lassen, das war Punkt 1. Retina Displays, wie sie immer häufiger in Smartphones verwendet werden, können durchaus hochauflösende Bilder darstellen. Wenn man auch auf die Bandbreite Rücksicht nehmen will, da hochauflösende Bilder das zur Verfügung stehende Downloadvolumen schmälern, kann man 2 Bilder zur Verfügung stellen. die werden dann mit media queries so eingebaut: Beispiel in CSS Code:
header { background-image: url(images/header.jpg); background-size: cover; height: 150px; width: 800px; } /* ... more 1x CSS rules ... */ @media screen and (-webkit-min-device-pixel-ratio: 2) { header { background-image: url(images/header_2x.jpg); } /* ... more 2x CSS rules ... */ } Mit Mediaqueries kann man die Bildauswahl automatisieren. Das gilt für Iphones und Ipads. Sinngemäss aber auch für alle anderen Smartphones, die allesamt kein Problem mit Bildern haben.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..." Aus einem Forum. |
|
|||
Lass dies weg:
Code:
img { max-width: 300px; height: auto; } Liefere das Bild in der Auflösung die du auch darstellen willst. Kümmere dich nicht um Smartphones, die haben ihre eigenen Möglichkeiten geschaffen mit den Bildern umzugehen.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..." Aus einem Forum. |
|
|||
Zitat:
Auch wenn ich für jeden Breakpoint ein anderes Bild ausliefere muss das Bild ja trotzdem skalieren bis der nächste Breakpoint erreicht wird. Was meinst du mit Smartphones haben ihr eigenen Möglichkeiten? |
|
|||
Entweder du lernst HTML und CSS von Anfang an oder du lässt dir sagen das dein Vorhaben so nicht sinnvoll ist.
Ich habe bis jetzt immer noch nicht verstanden warum es denn skalieren soll. Bilder skaliert man nicht im Browser, das ist ganz einfach eine schlechte Vorgehensweise. Entweder stimmt dein Design dann nicht oder dein Konzept. Wenn du aber Hintergründe meinst dann solltest du das auch sagen.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..." Aus einem Forum. |
Sponsored Links |
|
|||
Das ist überholt. Flexible Bilder sind ein wesentlicher Bestandteil von Responsive Webdesign. Die Browser können das ziemlich gut.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Media Querys - Layout geht wird über den Displayrand angezeigt | DarkNemesis84 | CSS | 9 | 05.05.2013 23:00 |
div-höhe? - Hauptcontainer über ganze Seite will nicht... | AndMei | CSS | 5 | 13.12.2010 15:43 |
Probleme mit dem zentrieren | Star_Scream | CSS | 2 | 27.02.2009 12:18 |
Ich komme nicht weiter - fertiges Layout ... | Gulli | CSS | 16 | 06.08.2008 16:00 |
Mozilla zeigt DIV zu oft an | cracki | CSS | 6 | 09.03.2008 16:22 |