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

...komplette Frage anzeigen

2 Antworten

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/

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

Was möchtest Du wissen?