Bilder scalieren

crane · #1 (**permalink**) 08.12.2022, 21:31

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?

MrMurphy · #2 (**permalink**) 08.12.2022, 22:33

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

Zum Beispiel

Zitat:

Mit dem Text gelingt mir das ganz einfach (verschiedene Schriftgrößen)

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.

Zitat:

Habt ihr Ideen wie man das gut und einfach lösen könnte?

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.

crane · #3 (**permalink**) 09.12.2022, 00:56

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.

cloned · #4 (**permalink**) 09.12.2022, 08:29

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

Sabine1 · #5 (**permalink**) 29.12.2022, 10:08

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

Code:

img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Video von youtube responsive in Webseite einbauen	R14	(X)HTML	1	28.01.2019 21:39
Zwei Bilder nebeneinander, sollen kleiner werden!	cecyle	CSS	1	12.01.2014 18:20
Hintergrund wird nicht angezeigt	maxx	CSS	6	14.10.2012 18:27
Hilfe!!! mein Homepagelayout funktioniert nicht!	maxx	CSS	5	14.10.2012 07:21
Bildergalerie mit Variablen	fledermaus	Serveradministration und serverseitige Scripte	1	08.04.2008 08:57