zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Bilder scalieren

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 08.12.2022, 21:31
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.01.2017
Beiträge: 33
crane befindet sich auf einem aufstrebenden Ast
Standard Bilder scalieren

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?
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 08.12.2022, 22:33
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 09.12.2022, 00:56
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.01.2017
Beiträge: 33
crane befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #4 (permalink)  
Alt 09.12.2022, 08:29
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

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
Mit Zitat antworten
  #5 (permalink)  
Alt 29.12.2022, 10:08
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 15.09.2015
Beiträge: 159
Sabine1 befindet sich auf einem aufstrebenden Ast
Standard

Eine weitere Möglichkeit wäre folgendes in der CSS Datei zu hinterlegen
Code:
img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}
Mit Zitat antworten
Antwort

Stichwörter
bilder, bildschirmgröße, größe, responsive design

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 20:14 Uhr.