zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Probleme mit height: auto in Chrome

Antwort
 
LinkBack Themen-Optionen Ansicht
  #11 (permalink)  
Alt 22.08.2013, 22:02
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.08.2013
Beiträge: 242
mymaksimus befindet sich auf einem aufstrebenden Ast
Standard

Für die mobile version solltest du dir ein komplett neues Layout anlegen. So hat das keinen sinn.
Mit Zitat antworten
Sponsored Links
  #12 (permalink)  
Alt 22.08.2013, 22:07
?!?
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

Zitat:
Zitat von mymaksimus Beitrag anzeigen
Für die mobile version solltest du dir ein komplett neues Layout anlegen. So hat das keinen sinn.
Quelle?
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
Sponsored Links
  #13 (permalink)  
Alt 22.08.2013, 22:13
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.07.2011
Beiträge: 80
axelf befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von explanator Beitrag anzeigen
Du hast den Link nicht richtig gelesen oder verstanden.

Was denn von beidem?
Den Link habe ich mir angesehen, nur ist mir der Zusammenhang zu meiner ursprünglichen Frage nicht so ganz klar.
Mit Zitat antworten
  #14 (permalink)  
Alt 22.08.2013, 22:14
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.07.2011
Beiträge: 80
axelf befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von mymaksimus Beitrag anzeigen
Für die mobile version solltest du dir ein komplett neues Layout anlegen. So hat das keinen sinn.
Das kann ich so nicht unterschreiben.
Mit Zitat antworten
  #15 (permalink)  
Alt 22.08.2013, 22:31
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.07.2011
Beiträge: 80
axelf befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #16 (permalink)  
Alt 22.08.2013, 22:33
?!?
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

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 ... */

}
Pixel-ratio ist von Apple, da steht 1 für niedrige Auflösung und 2 für hochauflösende Retina-displays.

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.
Mit Zitat antworten
  #17 (permalink)  
Alt 22.08.2013, 22:44
?!?
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

Lass dies weg:

Code:
img {
        max-width: 300px;
        height: auto;
    }
Wenn du das Bild mit Höhe und Breite auslieferst.
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.
Mit Zitat antworten
  #18 (permalink)  
Alt 22.08.2013, 22:55
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.07.2011
Beiträge: 80
axelf befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von explanator Beitrag anzeigen
Lass dies weg:

Code:
img {
        max-width: 300px;
        height: auto;
    }
Wenn du das Bild mit Höhe und Breite auslieferst.
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.
Aber das CSS bewirkt ja gerade das skalieren. Wie soll das Bild sonst skalieren?
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?
Mit Zitat antworten
  #19 (permalink)  
Alt 22.08.2013, 23:00
?!?
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

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.
Mit Zitat antworten
Sponsored Links
  #20 (permalink)  
Alt 22.08.2013, 23:21
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von explanator Beitrag anzeigen
Bilder skaliert man nicht im Browser, das ist ganz einfach eine schlechte Vorgehensweise.
Das ist überholt. Flexible Bilder sind ein wesentlicher Bestandteil von Responsive Webdesign. Die Browser können das ziemlich gut.
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
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


Alle Zeitangaben in WEZ +2. Es ist jetzt 08:53 Uhr.