Frage von nofas, 56

Bilder in Html je nach Größe des Bildschrims skalieren und verändern?

Ich schreibe zur Zeit ein Website mit html, css und etwas javascript. Auf jeden Fall will ich drei Bilder in diese Website einbinden. Nun soll, wenn das Fenster kleiner ist als zum Beispiel 500px (breite) nur ein Bild erscheinen, das die ganze Breite ausfüllt. Wenn das Fenster jetzt etwas größer ist, sollen alle drei Bilder erscheinen( kleiner als normal) , die sich, wenn der Bildschirm noch größer wird, mit skalieren. Ich hoffe ihr habt verstanden was ich meine ^^ Wie kann man soetwas umsetzten? (möglichst ohne javascript)

Hilfreichste Antwort - ausgezeichnet vom Fragesteller
von Limearts, 33

Im einfachsten Fall setzt man das um indem man mit relativen Größen arbeitet, statt mit festen.

CSS unterstützt verschiedene Größeneinheiten. px, em, rem, vw, %...

Interessant sind für diesen Ansatz vor allem % sowie vw (bzw vh).

% gilt dabei für das übergeordnete Element, vw/vh spricht den Viewport also tatsächlich sichtbaren Bereich des Displays an.

Zusätzlich muss mittels MediaQueries abgefragt werden, wie groß das Fenster / der Viewport gerade ausfällt. Stichwort ist hier responsive Design. http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Bei einer Darstellung von 500px Fensterbreite oder geringer müssten demnach zwei der Bilder mittels zugewiesener ID oder Klasse per display:none ausgeblendet oder via PHP-Skript unterbunden werden. Sobald das Fenster größer ausfällt muss ein anderer Query die Darstellung der Bilder zulassen und mit entsprechend angepassten relativen Größenwerten deren Positionierung steuern.

Zusätzlich wäre es vermutlich sinnvoll bei einem so expliziten Fall auch gleich zu entsprechend skalierenden Grafiken zu greifen http://www.hongkiat.com/blog/serving-responsive-images/

Antwort
von IchBinUnwichtig, 28

Da bist du hier falsch. Ich würde dir empfehlen, mal in einem entwickelforum (wenn möglich speziell für webdesign) nachzufragen. Viel erfolg

Keine passende Antwort gefunden?

Fragen Sie die Community

Weitere Fragen mit Antworten