nicht angemeldet
Responsive Design Bilder automatisch anpassen
Auge
Gunnar Bittersmann
TSHallo,
damit meine Webseite auch auf dem Handy das Design behält, müssten die Bilder entsprechen verkleinert werden. Das funktioniert bei Text ja offensichtlich automatisch, nur eben bei Bildern nicht.
Bei der Lösungssuche im Netz finde ich zumeist sowas wie:
img { height: auto; /* Falls Dimensionsangaben im HTML vorhanden sind */ max-width: 100%; }
Tja... das funktioniert zwar, nur leider auch umgekehrt, weil sich die Bildmaße bei entsprechenden Bildschirm auf mehr als 100% des Originalbildes vergrößern.
Klar, ich kann vorher die Bildabmessungen bestimmen und mit max-width deklarieren. Nur ist das, gerade bei vielen Bilddateien, sehr aufwendig und auch nicht wirklich variabel.
Daher... Gibt es eine einfache Lösung?
Falls nicht, dachte ich vielleicht kann CSS oder JS selbständig die jeweiligen Bildabmessungen variabel auslesen und anpassen, nur wie?
Gruss Henry
-
Hallo
Ein Teil der Lösung heißt Media Queries. Mit ihnen bestimmst du Abschnitte in der CSS-Datei, die für bestimmte Abmessungen des Viewports gelten. Regeln, die in diesen Abschnitten notiert sind und be anderen Abmessungen nicht mehr oder mit anderen Werten gültig sein sollen, müssen in den betreffenden Abschnitten explizit überschrieben werden.
Für die fragliche Regel wäre eine Abgrenzung nach oben richtig. Beispiel:
img { height: auto; max-width: 100%; } @media all and (min-width: 50em) { img { height: auto; max-width: 25em; } }Zudem gehört in den
<head>des HTML-Dokuments die Angabe<meta name="viewport" content="width=device-width, initial-scale=1.0">, damit Mobilbrowser wissen, dass sie das Dokument nicht als Desktopsimulation mit einer virtuellen Breite von 900px darstellen sollen.Weiterhin gibt es für
<img>das Attributsrcsetund das Element<picture>, um z.B. für Smartphone-Displays unnötig hochaufgelöste Bilder, die für den FullHD-Desktop gedacht sind, herunterladen zu müssen.Tschö, Auge
--
Wenn man ausreichende Vorsichtsmaßnahmen trifft, muss man keine Vorsichtsmaßnahmen mehr treffen.
Toller Dampf voraus von Terry Pratchett-
Hallo Auge,
danke schon mal für die schnelle Antwort.
Leider bringt das aber auch keinen Erfolg, durch max-width: 25em; wird das Bild ja auch nur statisch begrenzt ohne die originale Breite des Bildes als Maximalbreite zu beachten.
Dachte da sinnbildlich an sowas wie:
<img scr="bildx.jpg" JavaScript= lies bildabmessung aus als variable v und schreibe style="max-width:v;" />
sofern es keine wirkliche CSS-Lösung gibt.
Wüsste aber auch in dem Fall nicht wie man das richtig codieren müsste.
Weiterhin gibt es für
<img>[das Attributsrcset]Ja, das hatte ich mir auch angeschaut und ist für die Zukunft auch vielleicht interessant, wobei der Grundgedanke vielleicht schon überholt ist, denn angesichts Flatrates und LTE ist die Größe der Datenübertragung vielleicht nicht mehr so beachtenswert, sondern eher kontraproduktiv, da ja jedem Hündchen sein eigener Knochen geliefert werden soll, sprich ein Bild in verschiedenen Auflösungen. Da hätte ich mir gewünscht das W3C hätte es unproblematischer gemacht, wie eben Text, dass Bilder sich automatisch anpassen.
Gruss Henry
-
Hallo
… durch max-width: 25em; wird das Bild ja auch nur statisch begrenzt
Das war auch nur ein Beispiel. Die konkreten Wunschwerte musst du selbst suchen und anwenden.
Weiterhin gibt es für
<img>[das Attributsrcset]Ja, das hatte ich mir auch angeschaut und ist für die Zukunft auch vielleicht interessant, wobei der Grundgedanke vielleicht schon überholt ist, denn angesichts Flatrates und LTE ist die Größe der Datenübertragung vielleicht nicht mehr so beachtenswert, sondern eher kontraproduktiv,
Flatrates in einer Zeit, in der Anbieter immer wieder versuchen, Angebote als normal zu etablieren, die bestimmte Dienste bevorzugen und damit andere Dienste, zu denen wohl alle hier diskutierten gehören werden, benachteiligen? Flatrates in einem Markt, in dem Mobilfunktarife fast immer volumenbegrenzt sind?
LTE ist kein Argument für unnötigen Traffic. Die verfügbaren Datenvolumen/Monat sind zwar typischerweise höher als „früher“ aber heute will man™ auch sehr viel datenhungrigere Dienste benutzen als früher. Da ist jedes unnötig verschwendete Byte ärgerlich. Zudem ist auch bei LTE die erreichbare Geschwindigkeit stark von der Auslastung der Zellen abhängig.
da ja jedem Hündchen sein eigener Knochen geliefert werden soll, sprich ein Bild in verschiedenen Auflösungen.
Ein kleines Hündchen kann halt mit einem Knochen, der größer ist, als er selbst, nichts anfangen.
Da hätte ich mir gewünscht das W3C hätte es unproblematischer gemacht, wie eben Text, dass Bilder sich automatisch anpassen.
Genau das passiert doch? Mit
img { max-width: 100%; height: auto; }wird ein Bild in einem schmalen Viewport kleiner, in einem breiten Viewport aber nicht größer als die Originalabmessungen.Tschö, Auge
--
Wenn man ausreichende Vorsichtsmaßnahmen trifft, muss man keine Vorsichtsmaßnahmen mehr treffen.
Toller Dampf voraus von Terry Pratchett-
Da hätte ich mir gewünscht das W3C hätte es unproblematischer gemacht, wie eben Text, dass Bilder sich automatisch anpassen.
Genau das passiert doch? Mit
img { max-width: 100%; height: auto; }wird ein Bild in einem schmalen Viewport kleiner, in einem breiten Viewport aber nicht größer als die Originalabmessungen.Du hast recht, jetzt funktioniert es komischerweise, vielleicht irgendwelche CSS Anweisungen, die sich da ins Gehege kamen.
Vielen Dank :- )
-
Hallo
Schön, dass es funktioniert.
Manchmal reicht es schon, wenn bei einer vorherigen Zeile das abschließende Semikolon fehlt. Alles, was danach notiert ist, wird dann — zumindest im Firefox — ignoriert. Sowas sollte aber in einem Editor mit gutem Syntaxhighlightning auffallen.
Tschö, Auge
--
Wenn man ausreichende Vorsichtsmaßnahmen trifft, muss man keine Vorsichtsmaßnahmen mehr treffen.
Toller Dampf voraus von Terry Pratchett
-
-
-
@@Henry
wobei der Grundgedanke vielleicht schon überholt ist, denn angesichts Flatrates und LTE ist die Größe der Datenübertragung vielleicht nicht mehr so beachtenswert
Dein Gedankengang ist falsch.
-
Es gibt bei uns AFAIK keine Flatrates. Es gibt Datenvolumen – womöglich so groß, dass man das kaum ausschöpft. Solange nicht Anbieter von Webseiten immer mehr Megabyte sinnlos übern Äther schicken.
-
Es gibt nicht überall LTE. Das mag dir nicht in den Sinn kommen, wenn du in der Stadt auf der Straße unterwegs bist. Aber fahr mal übers Land. Oder fahr mal U-Bahn.
Und in anderen Ländern sieht’s mit Datenvolumina und Preisen dafür und Verfügbarkeit von schnellen Netzverbindungen nochmal ganz anders aus.
LLAP 🖖
--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory -
-
-
Hello,
Weiterhin gibt es für
<img>das Attributsrcsetund das Element<picture>, um z.B. für Smartphone-Displays unnötig hochaufgelöste Bilder, die für den FullHD-Desktop gedacht sind, herunterladen zu müssen.Gibt es für Hintergrundbilder etwas ähnliches?
Mit den CSS-Angaben für Background-size (content, cover, ...) stehe ich ohnehin noch auf Kriegsfuß. Wie die sich in Mobilgeräten auswirken ist mir noch nicht klar, wenn der Screen weine Orientierung ändert. Und welche Größe man wählen sollte auch nicht...
Liebe Grüße
Tom S.--
Es gibt nichts Gutes, außer man tut es
Andersdenkende waren noch nie beliebt, aber meistens diejenigen, die die Freiheit vorangebracht haben.
-
Hallo
Weiterhin gibt es für
<img>das Attributsrcsetund das Element<picture>…Gibt es für Hintergrundbilder etwas ähnliches?
Du kannst über Media Queries steuern, welches Hintergrundbild angezeigt wird. Allerdings war mir so, dass einige Browser dennoch alle referenzierten Bilder herunterladen. Davon meine ich vor ein paar Jahren gelesen zu haben. Ich weiß allerdings nicht, ob das aktuell (noch) so ist.
Mit den CSS-Angaben für Background-size (content, cover, ...) stehe ich ohnehin noch auf Kriegsfuß. Wie die sich in Mobilgeräten auswirken ist mir noch nicht klar, wenn der Screen weine Orientierung ändert.
Ich weiß nicht, ob Mobilbrowser beim drehen des Displays die eventuell anderen Hintergrundbilder herunterladen. Das lässt sich ja nun leicht testen, ich habe es bisher nur nie getan. Einerseits wird das Layout je nach Media Query ja tatsächlich angepasst und warum soll das nicht auch für die dort referenzierten Bilder gelten, andererseits wäre mir der eventuell vorhandene Qualitätsverlust schnurzpiepegal, wenn mir der Traffic erspart bleibt. Ein Display muss schon ein sehr krasses Seitenverhältnis haben, wenn ein für die Porträtausrichtung gedachtes aber in der Landschaftsausrichtung angezeigtes Bild derart aufpixelt, dass es unangenehm auffällt.
Die Größe des Bildes ist allerdings nicht alles. Manchmal will man auf verschieden großen oder verschieden ausgerichteten Displays auch verschiedene Motive oder aber Bildausschnitte des selben Motivs anzeigen. Dann sollte man vielleicht bei bestimmten „Gruppen“ von Media-Query-Abschnitten, bei denen davon ausgegangen werden kann, dass die mit dem selben Gerät zutreffen können (z.B. eben bei Porträt- vs. Landschaftsausrichtung), das selbe Bild benutzen und nur die Ausrichtung und den Ausschnitt verändern. Dann fiele in (vermutlich) vielen Fällen das Nachladen eines anderen Hintergrundbildes weg (wenn das denn überhaupt stattfindet).
Tschö, Auge
--
Wenn man ausreichende Vorsichtsmaßnahmen trifft, muss man keine Vorsichtsmaßnahmen mehr treffen.
Toller Dampf voraus von Terry Pratchett
-
-