Hallo zusammen,
ich suche nach einer Möglichkeit Bilder zu scalieren. Ich benötige das für verschiedene Größendarstellungen, Stichwort responsive Design und mobile Version der Webseite. Ich habe die Bilder in einer bestimmten Größe bei normaler Desktopdarstellung. Wenn der Bildschirm kleiner wird passe ich stufenweise die Größe vom Inhalt an. Mit dem Text gelingt mir das ganz einfach (verschiedene Schriftgrößen), aber für die Bilder habe ich dafür noch keine Lösung gefunden. Die Bilder haben im Original verschiedene Maße, abhängig vom Bild. Habt ihr Ideen wie man das gut und einfach lösen könnte?

Das liest sich nicht als hättest du das Konzept und den Sinn vom responsiven Layout verstanden.

Zum Beispiel

Eine sinnvolle Schriftart in gut lesbarer Größe ist auf allen Fenster- und Bildschirmgrößen gut zu lesen. Daran sollte nicht gedreht werden. Grade Smartphones benötigen eher größere Schriften, da sie in der Regel aus der (zitternden) Hand beim Gehen oder in Fahrzeugen gelesen werden. Deshalb ist es unsinnig dort kleinere Schriftgrößen zu verwenden. Die Schriftgröße sollte nie dem Layout angepasst werden, sondern das Layout einer sinnvollen Schriftgröße folgen.

Ja. Ordne die Elemente der Website je nach Bildschirmgröße sinnvoll an und überlasse die Ausgabe dem jeweiligen Browser. Verwende MediaQueries, Flexbox und CSS-Grid.

Ein großer Fortschritt von HTML5 im Zusammenspiel mit CSS3 ist grade, das Webseitenerstellern viel Berechnung und insgesamt viel Arbeit abgenommen wird. Der kann sich somit auf das Entscheidende konzentrieren: Den eigentlichen Inhalt.

Für konkrete Tips müssten wir den Inhalt und aktuellen Entwicklungsstand deiner Website kennen.

Hier ist die Adresse zu meiner Webseite. Ich würde gerne das so wie der Rest auch die Bilder Stufenweise kleiner werden. Ich kann aber nicht mit festen Werten für die einzelnen Bildschirmgrößen arbeiten, da die Bilder in der Ausgangsgröße unterschiedliche Maße haben. Was kann ich da nun machen.

Dafür gibt es "responsive images", also picture element in dem unterschiedliche sources für ein Bild definiert werden.

https://developer.mozilla.org/en-US/...ponsive_images

Eine weitere Möglichkeit wäre folgendes in der CSS Datei zu hinterlegen