responsive-web-design

[Sven]

Hallo,
gibt es etwas besonders zu beachten bei der Verwendung von Fotos/Grafiken (jpg, gif u.a.),
damit deren Darstellung möglichst optimal ist auf den unterschiedlichsten Medien.
Bisher habe ich im Wesentlichen angegeben "Border:none; Width:...; height: ...;" alt="...".
Danke
Sven

[Sven]

Hallo,

gibt es etwas besonders zu beachten bei der Verwendung von Fotos/Grafiken (jpg, gif u.a.),
damit deren Darstellung möglichst optimal ist auf den unterschiedlichsten Medien.
Bisher habe ich im Wesentlichen angegeben "Border:none; Width:...; height: ...;" alt="...".

Gibt es wohl nichts zu beachten, oder weiß niemand etwas darüber?

Sven

[Jörg Reinholz]

Gibt es wohl nichts zu beachten, oder weiß niemand etwas darüber?

Wir wissen nicht recht, was Du wissen willst. Ich jedenfalls nicht.

Jörg Reinholz

[Sven]

Die Größenangabe sind bisher in px (bei Bilder). Aber sehr große Bilder passen ja dann nicht auf Geräte wie Iphone u.a.
Gruß
Sven

[Max Smily]

Hallo,

vermutlich suchst du nach einem Weg, dass sich Bilder in der Breite dynamisch an den Viewport anpassen.

  
@media screen and (max-device-width: 750px), screen and (max-width: 750px) {  
  body { width: auto; }  
  img { width: 100%; } /* Bilder sind immer so breit wie der Viewport */  
  .bgImage { width: 100%; background-size: contain; } /* Hintergrundbilder sind immer so breit wie der Viewport */  
}  

So werden auch sehr große Bilder auf die kleinen Breiten eingepasst. Problem ist, dass die für große Auflösungen angelegten Bilder bei den kleinen Screens trotzdem in voller Dateigröße geladen werden müssen, nicht so gut für langsame Handytarife.

Grüße
Max