Seite 98 von 101, insgesamt 101 Einträge

Responsive Webdesign: Problemfall img

Responsive Webdesign ist derzeit wahrscheinlich die Layout-Technik im Webdesign (und kommt im Übrigen auch hier im Blog zum Einsatz). Vereinfacht gesagt wird es damit möglich, ein Basis-Layout mittels CSS abhängig von der Bildschirmauflösung anzupassen – von den 320 Pixeln Breite eines Smartphones bis hin zu den 1600 und mehr Pixeln moderner Monitore. Ein Problem responsiver Designs sind Grafiken, oder besser: Elemente mit fester Breite, welche nicht über CSS zugewiesen wird.

Eine Grafik wird über das img-Element in Webseiten eingebunden, wobei ihr ihre tatsächlichen Ausmaße als Attribute zugewiesen werden. (Ausgenommen sind hier Hintergrundgrafiken – die kann man für jede Auflösung passend zuweisen.) Bindet man nun z.B. ein 640 Pixel breites Foto ein, sprengt dieses etwa die typischen 320 Pixel Bildschirmbreite eines Smartphones.

Lösungsansätze

  • Fluid images: Ethan Marcotte, Autor des usprünglichen Artikels, schlägt vor, Grafiken statt Dimensions-Attributen via CSS max-width: 100% zuzuweisen
  • Responsive Images: Scott Jehl präsentiert eine Technik, welche eine eingebundene kleine Grafik serverseitig durch eine größere ersetzt
  • Mit Javascript möchte Peter Gasston ein leeres div-Element bei hinreichender Auflösung dynamisch ersetzen
"Responsive Webdesign: Problemfall img" vollständig lesen