Wie passe ich Grafiken an ein responsive Webdesign an?

... komplette Frage anzeigen

3 Antworten

Das liegt wohl daran, dass zwischen 800px und 900px keine Anweisung greift. Die hier geht ja nur bis 800px. was kommt denn da drüber?

Antwort bewerten Vielen Dank für Deine Bewertung
Kommentar von Savix
08.11.2016, 18:44

Stimmt, hast recht.
Gar nichts kommt da drüber, genau daran liegts wohl, wie du schon schriebst.

Da stand ich grad auf ganzer Linie auf dem Schlauch... und tue es zum Teil immernoch. ^^
Ich bin mir nämlich nicht sicher, wie ich das jetzt am besten umsetzen, also das Design einer weiteren Fenstergröße definieren kann. Nicht von der Form an sich her, sondern viel mehr von der Logik.

Kannst du mir auf die Sprünge helfen?

Danke für deine Antwort!

0
img {
  width: 100%;
  height: auto;
}

Das Bild passt sich dann am Eltern-Element an. Die nötigen Abstände dann lediglich mit einem padding für links und rechts definierst. 

LG medmonk 

Antwort bewerten Vielen Dank für Deine Bewertung

Moin Savix,

wie du Images korrekt responsiv darstellst, hast du schon als Antwort bekommen.

Ich wollte dazu nur anmerken, dass es guter Stil ist SVG Images, also Vektorgrafiken zu verwenden. Gerade bei responsiven Websites. Denn die Vektorimages verhindern, dass Bilder zB beim Zoom unscharf werden. Das kann schnell passieren wenn man eine Seite auf verschiedenen Auflösungen darstellt.

https://liechtenecker.at/en/svg-die-zukunft-von-grafiken-auf-webseiten/

Der Umgang und die Erstellung von Vektorgrafiken erfordert allerdings etwas Übung.

Grüße - bormolino

Antwort bewerten Vielen Dank für Deine Bewertung
Kommentar von medmonk
09.11.2016, 07:23

Denn die Vektorimages verhindern, dass Bilder zB beim Zoom unscharf werden.

Sorry aber das ist schlichtweg falsch. Nur weil Bilder im SVG-Format eingebunden werden, die Qualität nicht bessert wird. Geschweige irgendwie die Schärfe positiv oder negativ beeinflusst. 

Ganz unrecht dennoch nicht hast. Lediglich Bilder und Grafiken vertauscht hast. Vektoren-basierte Grafiken können im Gegensatz zu Pixel-basierten Bildern und/ Grafiken in einem verlustbehafteten Format verlustfrei skaliert werden. 

Das kann schnell passieren wenn man eine Seite auf verschiedenen Auflösungen darstellt.

Auch bei Bildern es dank diverser Image-Replacement Techniken genügend Möglichkeiten gibt. Was letztendlich sowohl Client als auch Server-seitig Traffic spart. Setzt jedoch voraus, das man sich ausreichend damit beschäftigt. 

LG medmonk 

1

Was möchtest Du wissen?